Css 我想带两个div'；她在一个房间里
我的页面分为3个部分，我使用了flex box模型进行布局。第一部分是top-panel.jsp，我在网站的每个页面中都明确地包含了它。第二部分是左体，第三部分是右体，我使用“div”和flex的概念对其进行了划分，但现在我想将左体div和右体div合并到一个单独的div中，但它在我的页面上不起作用 代码是：Css 我想带两个div'；她在一个房间里,css,jsp,flexbox,Css,Jsp,Flexbox,我的页面分为3个部分，我使用了flex box模型进行布局。第一部分是top-panel.jsp，我在网站的每个页面中都明确地包含了它。第二部分是左体，第三部分是右体，我使用“div”和flex的概念对其进行了划分，但现在我想将左体div和右体div合并到一个单独的div中，但它在我的页面上不起作用 代码是： <%@ include file="top-panel.jsp" %> <div class="left_body"> <!-- Heading
<%@ 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 </div>
</div>
</div>
您需要使用float和clearfix类。请看演示
。左体{
位置：相对位置；
宽度：69%；
页边顶部：1px；
浮动：左；
}
.右(右)体{
位置：相对位置；
显示：块；
宽度：29%；
浮动：左；
}
.clearfix:之后{
内容：“；
显示：表格；
}
.clearfix:以前{
内容：“；
显示：表格；
}
.clearfix{
明确：两者皆有；
}
欢迎${username}
${shortcut}
${status}
待决任务
覆核中的申请
${myProjectsHeader}
你知道吗
非正式休假（CL）的总缺勤时间（包括周日和其他中间假日，前缀为
和/或后缀为
的假期）通常一次不得超过9天。
阅读休假规则
事实2就在这里。如果所提供的信息与叶子相关，那就太好了。
阅读相关链接
事实2就在这里。如果所提供的信息与叶子相关，那就太好了。
阅读相关链接
您是Rnd自动化系统新手吗？
阅读常见问题解答
如需任何查询，请发送电子邮件至rndops@iitg.ernet.in
.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 </div>
</div>
</div>
</div>
</body>
欢迎${username}
${shortcut}
${status}
待决任务
覆核中的申请
${myProjectsHeader}
你知道吗
非正式休假（CL）的总缺勤时间（包括周日和其他中间假日，前缀为
和/或后缀为
的假期）通常一次不得超过9天。
阅读休假规则
事实2就在这里。如果所提供的信息与叶子相关，那就太好了。
阅读相关链接
事实2就在这里。如果所提供的信息与叶子相关，那就太好了。
阅读相关链接
您是Rnd自动化系统新手吗？
阅读常见问题解答
如需任何查询，请发送电子邮件至rndops@iitg.ernet.in
.right-box{
margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px;
width: 29%;
}
.form_area{
width: 69%;
}
.right-box{
margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px;
width: 29%;
}
.form_area{
width: 69%;
}