[英]Divs next to each other with nested divs on top of each other?
I'm trying to create the following layout: 我正在尝试创建以下布局:
(Note: This screenshot uses a table with 1 row and 2 data cells with nested divs -- I'm trying to remove the table, essentially) (注意:此屏幕截图使用的表格包含1行和2个带有嵌套div的数据单元格-本质上,我正在尝试删除该表格)
My HTML is as follows: 我的HTML如下:
<!-- outter most div containing everything -->
<div>
<!-- left div -->
<div style="max-width:50%; float:left;">
<div class="bulletin margin-top">
<div class="title ">
<span>BULLETIN BOARD</span>
</div>
<div class="content">
@Html.Partial("~/Views/BulletinBoard.cshtml")
</div>
</div>
</div>
<!-- rightdiv -->
<div style="max-width:50%; float:left">
<!-- top right -->
<div class="inner announcements margin-top">
<div class="title inner">
<span>ANNOUNCEMENTS</span>
</div>
<div class="inner content fullwidth announcementcontent">
@Html.Action("GetAnnouncement", "Announcement")
</div>
</div>
<!-- bottom right -->
<div class="inner facilitynews">
<div class="title inner">
OUR FACILITY NEWS
</div>
<div class="inner content">
@Html.Action("GetFacilityNews", "FacilityMessage")
</div>
</div>
</div>
</div>
Here's a JS Fiddle which includes all my CSS: 这是一个JS Fiddle,其中包括我所有的CSS:
https://jsfiddle.net/2caL1ost/ https://jsfiddle.net/2caL1ost/
For the most part, none of the CSS does anything especially important; 在大多数情况下,没有CSS可以做任何特别重要的事情。 just sets padding, margins, colors etc.
只需设置填充,边距,颜色等。
When I run it, this is what I get: 当我运行它时,这就是我得到的:
The left half, the Bulletin Board, is displaying as desired. 左半部分,公告板,根据需要显示。 It's the right side that is not behaving as desired.
这是右侧,行为不理想。
If I remove the inner
class ( postion: absolute;
) then the white box "behind" the biege one on the right disappears, so I think they're simply overlapping each other? 如果我删除
inner
类( postion: absolute;
),那么右侧双向窗口后面的白框消失了,所以我认为它们只是相互重叠了?
How do you create nested divs next to each other and on top of each other in such a way that the content of one div won't shrink the other div? 如何以彼此相邻且彼此重叠的方式创建嵌套div,以使一个div的内容不会缩小另一个div的内容?
I think you simply need to remove a lot of useless CSS (float, width, height, etc) from your code and you have your layout: 我认为您只需要从代码中删除很多无用的CSS(浮动,宽度,高度等),就可以拥有布局:
.bulletin { margin: 0px; margin-right: 1.2%; } .bulletin .title { color: #fff; font-size: 14px; font-weight: bold; text-transform: none; background-color: #89b907; font-weight: 200; } .bulletin .title span { margin-left: 10px } .bulletin .content { padding: 10px 0; display: inline-block; background: #fff; line-height: 28px; max-height: 250px; overflow-x: auto; } .bulletin .content p, .bulletin .content>b { padding: 10px; } .bulletin hr { border-top: 1px dashed #8c8b8b; } .announcements .title { color: #fff; font-size: 12px; font-weight: bold; text-transform: none; margin-left: 0px; background-color: #099db4; padding-left: 0px; padding-right: 10px; } .announcements .title span { margin-left: 10px } .announcements .content { padding: 10px; background: #fff; line-height: 28px; padding-right: 0px; max-height: 250px; overflow-x: auto } .facilitynews { margin: 20px 0px } .facilitynews .title { color: #fff; font-size: 12px; font-weight: bold; text-transform: none; margin-left: 0; background-color: #e24242; padding: 8px; } .facilitynews .content { padding: 8px; background: #fff7da; }
<!-- outter most div containing everything --> <div> <!-- left div --> <div style="width:50%; float:left;"> <div class="bulletin margin-top"> <div class="title "> <span>BULLETIN BOARD</span> </div> <div class="content"> beep boop </div> </div> </div> <!-- rightdiv --> <div style="width:50%; float:left"> <!-- top right --> <div class="inner announcements margin-top"> <div class="title inner"> <span>ANNOUNCEMENTS</span> </div> <div class="inner content fullwidth announcementcontent"> announcement content </div> </div> <!-- bottom right --> <div class="inner facilitynews"> <div class="title inner"> OUR FACILITY NEWS </div> <div class="inner content"> fac news content </div> </div> </div> </div>
Shortened solution with flexbox 使用Flexbox 缩短解决方案
Container: display: flex
容器:
display: flex
HTML structure HTML结构
<div class="container">
<!-- Left side -->
<div>
<div class="box">
<h4 class="title"></h4>
<p>Text</p>
</div>
</div>
<!-- Right side -->
<div>
<div class="box">
<h4 class="title"></h4>
<p>Text</p>
</div>
<div class="box">
<h4 class="title"></h4>
<p>Text</p>
</div>
</div>
</div>
In total 总共
body { margin: 0; } .container { display: flex; } .container>div { flex: 0.5; } .box { padding: 10px; } .title { color: white; margin: 5px 0; padding: 5px; } .title.bulletin { background: lightgreen; } .title.news { background: red; } .title.announcements { background: lightblue; } @media screen and (max-width: 767px) { .container { flex-direction: column; } }
<div class="container"> <div> <div class="box"> <h4 class="title bulletin">Title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure dolorem obcaecati impedit odio in velit adipisci molestias fugit, voluptatum consequatur exercitationem, veniam optio, quos dolor, corporis quo. Quidem, modi, eum?</p> </div> </div> <div> <div class="box"> <h4 class="title news">Title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum quos facilis quisquam, at voluptatum provident, doloremque iure perspiciatis voluptates voluptas nihil reprehenderit minus tempore mollitia beatae odit! Soluta, numquam.</p> </div> <div class="box"> <h4 class="title announcements">Title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quo provident voluptatum, qui modi magnam, vero atque, laudantium, libero autem quae voluptate possimus inventore! Explicabo officia fuga, ex architecto et!</p> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.