div彼此相鄰，嵌套div彼此疊放？

Question

我正在嘗試創建以下布局：

（注意：此屏幕截圖使用的表格包含1行和2個帶有嵌套div的數據單元格-本質上，我正在嘗試刪除該表格）

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

這是一個JS Fiddle，其中包括我所有的CSS：

https://jsfiddle.net/2caL1ost/

在大多數情況下，沒有CSS可以做任何特別重要的事情。 只需設置填充，邊距，顏色等。

當我運行它時，這就是我得到的：

左半部分，公告板，根據需要顯示。 這是右側，行為不理想。

如果我刪除inner類（ postion: absolute; ），那么右側雙向窗口后面的白框消失了，所以我認為它們只是相互重疊了？

如何以彼此相鄰且彼此重疊的方式創建嵌套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>

總共

 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>