彼此相邻的div与嵌套的div相互叠加？

Question

我正在尝试创建以下布局：

（注意：此屏幕截图使用一个带有1行的表和带有嵌套div的2个数据单元 - 我试图删除该表，基本上是

我的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>

这是一个包含我所有CSS的JS小提琴：

https://jsfiddle.net/2caL1ost/

在大多数情况下，CSS没有做任何特别重要的事情;只设置填充，边距，颜色等。

当我运行它时，这就是我得到的：

公告栏的左半部分正在显示。这是正确的一面，表现不尽如人意。

如果我删除了inner类（postion: absolute;），那么右边的biege“后面”的白框就会消失，所以我认为它们只是相互重叠了？

如何以彼此相邻的方式创建嵌套的div，使得一个div的内容不会缩小另一个div？

Answer 1

我认为您只需要从代码中删除大量无用的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>

Answer 2

使用 flexbox

缩短解决方案

容器：display: flex

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>

总计

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;