css - 我想把两个 div 放在一个 div 中

Question

我的页面分为 3 个部分，我使用 flex box 模型进行布局。第一部分是 top-panel.jsp，我已将其明确包含在我网站的每个页面中。第二部分是左主体，第三部分是右主体，我使用“div”和 flex 的概念进行划分，但现在我想将左主体 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 rndops@iitg.ernet.in &nbsp; &nbsp; &nbsp; &nbsp; </div>
    </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;
}

Answer 1

您需要使用float 和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 rndops@iitg.ernet.in  &nbsp;  &nbsp;  &nbsp;  &nbsp; </div>
              </div>
          </div>
<div>