我想在一個div中插入兩個div

我的頁面被分成3部分，我用佈局的flex box模型。第一部分是top-panel.jsp，我已將其明確包含在我的網站的每個頁面中。第二部分是左身，第三是右身，我使用「div」和flex的概念進行劃分，但現在我想將左身div和右身div帶入單個div，但它不適用於我的頁面。我想在一個div中插入兩個div

的代碼是：

<%@ include file="top-panel.jsp" %> 
    <div class="left_body"> 
    <!-- Heading Pannel Starts Here --> 
    <div class="welcome"> 
     <p id="heading-pannel">Welcome ${username}</p> 
     <hr id="hr-thick"> 
    </div> 
    ${shortcut} 
    <div class="form_area"> 
     <p> ${status} </p> 
     <div> 
     <c:if test="${emptyNotificationMessage!= null}"> 
     </c:if> 
     <c:if test="${notifications!= null}"> 
      <h3>Tasks pending</h3> 
      <hr id="hr-thin" /> 
      <div> 
      <c:forEach items="${notifications}" var="next"> 
       <form method="post" action="viewForm.htm"> 
       <img src="images/addon/u175.png" alt="pointer" class="pointer" /> 
       <input type="hidden" name="refNum" value="${next.key}"> ${next.value} 
       <input type="submit" value="View Form"> 
       </form> 
       <br> 
      </c:forEach> 
      </div> 
     </c:if> 

     <c:if test="${appHistory!= null}"> 
      <br/> 
      <br/> 
      <br/> 
      <br/> 
      <br/> 
      <h3>Application under review</h3> 
      <hr id="hr-thin" /> 
      <div> 
      <c:forEach items="${appHistory}" var="next"> 
       <img src="images/addon/u175.png" alt="pointer" class="pointer" /> ${next.value} 
       <br> 
      </c:forEach> 
      </div> 
     </c:if> 

     ${myProjectsHeader} 
     <div id="myProjects"> 
      <c:forEach items="${myProjects}" var="next"> 
      <form method="post" action="viewIndividualProject.htm"> 
       <input type="submit" value="${next.key}" class="transparent_btn"> 
       <input type="hidden" name="individualProjectLink" value="${next.value}"> 
       <input type="hidden" name="individualProjectName" value="${next.key}"> 
      </form> 
      <br> 
      </c:forEach> 
     </div> 


     </div> 
    </div> 
    </div> 
    <div class="right_body"> 
    <div class="right-box"> 
     <h3 class="h3-sty2">Do you Know</h3> 
     <p> 
     <h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p> 
     <p> 
     <h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p> 
     <p> 
     <h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p> 
     <hr id="hr-right-panel"> 
     <p> 
     <h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p> 
     <div> For any query e-mail to [email protected] &nbsp; &nbsp; &nbsp; &nbsp; </div> 
    </div> 
    </div>

當我在一個單一的股利增加身體左側和右側身體的整個代碼，佈局完全消失。如果有人可以幫我解決它。這會很棒。

左身，右身的CSS是：

.left_body { 
    position: relative; 
    width: 69%; 
    margin-top: 1px; 
} 
.right_body { 
    position: relative; 
    /* display:block; */ 
    width: 29%; 
    /* margin-top: 48px; 
    border:thin solid #BDBDBD; 
    border-radius:5px; */ 
} 
.right-box { 
    margin-top: 48px; 
    border: thin solid #BDBDBD; 
    border-radius: 5px; 
}

來源

2016-04-19 Harsha Heda

您需要使用浮動和clearfix類。請參閱演示。

.left_body { 
 
    position: relative; 
 
    width: 69%; 
 
    margin-top: 1px; 
 
    float: left; 
 
} 
 
.right_body { 
 
    position: relative; 
 
    display: block; 
 
    width: 29%; 
 
    float: left; 
 
} 
 

 
.clearfix:after{ 
 
    content: " "; 
 
    display: table; 
 
} 
 
.clearfix:before{ 
 
    content: " "; 
 
    display: table; 
 
} 
 
.clearfix{ 
 
    clear: both; 
 
}

<div class="main clearfix"> 
 
    <div class="left_body"> 
 
       <!-- Heading Pannel Starts Here --> 
 
       <div class="welcome"> 
 
        <p id="heading-pannel">Welcome ${username}</p> 
 
        <hr id="hr-thick"> 
 
       </div> 
 
       ${shortcut} 
 
       <div class="form_area"> 
 
        <p> ${status} </p> 
 
        <div> 
 
         <c:if test="${emptyNotificationMessage!= null}"> 
 
         </c:if> 
 
         <c:if test="${notifications!= null}"> 
 
          <h3>Tasks pending</h3> 
 
          <hr id="hr-thin"/> 
 
          <div> 
 
           <c:forEach items="${notifications}" var="next"> 
 
            <form method="post" action="viewForm.htm"> 
 
             <img src="images/addon/u175.png" alt="pointer" class="pointer"/> 
 
             <input type="hidden" name="refNum" value="${next.key}"> 
 
             ${next.value} 
 
             <input type="submit" value="View Form"> 
 
            </form> 
 
            <br> 
 
           </c:forEach> 
 
          </div> 
 
         </c:if> 
 

 
         <c:if test="${appHistory!= null}"> 
 
          <br/><br/><br/><br/><br/> 
 
          <h3>Application under review</h3> 
 
          <hr id="hr-thin"/> 
 
          <div> 
 
           <c:forEach items="${appHistory}" var="next"> 
 
            <img src="images/addon/u175.png" alt="pointer" class="pointer"/> 
 
            ${next.value} 
 
            <br> 
 
           </c:forEach> 
 
          </div> 
 
         </c:if> 
 

 
         ${myProjectsHeader} 
 
         <div id="myProjects"> 
 
          <c:forEach items="${myProjects}" var="next"> 
 
            <form method="post" action="viewIndividualProject.htm"> 
 
             <input type="submit" value="${next.key}" class="transparent_btn"> 
 
             <input type="hidden" name="individualProjectLink" value="${next.value}"> 
 
             <input type="hidden" name="individualProjectName" value="${next.key}"> 
 
            </form> 
 
            <br> 
 
          </c:forEach> 
 
         </div> 
 

 

 
        </div> 
 
       </div> 
 
      </div> 
 
    <div class="right_body"> 
 
       <div class="right-box"> 
 
       <h3 class="h3-sty2">Do you Know</h3> 
 
       <p><h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p> 
 
       <p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p> 
 
       <p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p> 
 
       <hr id="hr-right-panel"> 
 
       <p><h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p> 
 
       <div> For any query e-mail to [email protected] &nbsp; &nbsp; &nbsp; &nbsp; </div> 
 
       </div> 
 
      </div> 
 
<div>

來源

2016-04-19 11:56:31

到位樣式表的嘗試。

.left_body{ 
    position:relative; 
    width:69%; 
    margin-top:1px; 
    margin-right: 0px; 
    margin-left: 0px; 
    float: left; 
    height: 100%; 
    } 
    .right_body{ 
    position:relative; 
    /* display:block; */ 
    width:29%; 
    /* margin-top: 48px; 
    border:thin solid #BDBDBD; 
    border-radius:5px; */ 
    margin-right: 0px; 
    margin-left: 0px; 
    float: left; 
    height: 100%; 
    } 
    .right-box{ 
    margin-top: 48px; 
    border:thin solid #BDBDBD; 
    border-radius:5px; 
    } 
    .main_body{ 
     width: 100%; 
     height: 100%; 
    }

和你的代碼應該是這樣的： -

<body> 
     <div class="main_body"> 
     <div class="left_body"> 
      <!-- Heading Pannel Starts Here --> 
      <div class="welcome"> 
       <p id="heading-pannel">Welcome ${username}</p> 
       <hr id="hr-thick"> 
      </div> 
      ${shortcut} 
      <div class="form_area"> 
       <p> ${status} </p> 
       <div> 
        <c:if test="${emptyNotificationMessage!= null}"> 
        </c:if> 
        <c:if test="${notifications!= null}"> 
         <h3>Tasks pending</h3> 
         <hr id="hr-thin"/> 
         <div> 
          <c:forEach items="${notifications}" var="next"> 
           <form method="post" action="viewForm.htm"> 
            <img src="images/addon/u175.png" alt="pointer" class="pointer"/> 
            <input type="hidden" name="refNum" value="${next.key}"> 
            ${next.value} 
            <input type="submit" value="View Form"> 
           </form> 
           <br> 
          </c:forEach> 
         </div> 
        </c:if> 

        <c:if test="${appHistory!= null}"> 
         <br/><br/><br/><br/><br/> 
         <h3>Application under review</h3> 
         <hr id="hr-thin"/> 
         <div> 
          <c:forEach items="${appHistory}" var="next"> 
           <img src="images/addon/u175.png" alt="pointer" class="pointer"/> 
           ${next.value} 
           <br> 
          </c:forEach> 
         </div> 
        </c:if> 

        ${myProjectsHeader} 
        <div id="myProjects"> 
         <c:forEach items="${myProjects}" var="next"> 
           <form method="post" action="viewIndividualProject.htm"> 
            <input type="submit" value="${next.key}" class="transparent_btn"> 
            <input type="hidden" name="individualProjectLink" value="${next.value}"> 
            <input type="hidden" name="individualProjectName" value="${next.key}"> 
           </form> 
           <br> 
         </c:forEach> 
        </div> 


       </div> 
      </div> 
     </div> 
     <div class="right_body"> 
      <div class="right-box"> 
      <h3 class="h3-sty2">Do you Know</h3> 
      <p><h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p> 
      <p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p> 
      <p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p> 
      <hr id="hr-right-panel"> 
      <p><h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p> 
      <div> For any query e-mail to [email protected] &nbsp; &nbsp; &nbsp; &nbsp; </div> 
      </div> 
     </div> 
    </div> 
</body>

來源

2016-04-19 12:10:11

-1

如果完全要刪除從您的網頁left_body和right_body標籤只是刪除它們，試試這個： -

.right-box{ 
    margin-top: 48px; 
    border:thin solid #BDBDBD; 
    border-radius:5px; 
    width: 29%; 
    } 
    .form_area{ 
     width: 69%; 
    }

來源

2016-04-19 12:27:11

這應該是您之前回答的編輯。 –

我想在一個div中插入兩個div

回答

相關問題