Question

我的页面分为3个部分，我使用了弹性框模型进行布局。第一部分是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>

Answer 2

尝试使用此代替样式表。

    .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 rndops@iitg.ernet.in  &nbsp;  &nbsp;  &nbsp;  &nbsp; </div>
            </div>
        </div>
    </div>
</body>

Answer 3

如果您想完全删除页面中的left_body和right_body标记，请将其删除并尝试： -

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

我想在一个div中带两个div

3 个答案: