如何阻止div重疊？-有解無憂

這是小提琴：

body {
  background-color: #D3D3D3;
}

#container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  padding: 20px;
}

.section1 {
  display: flex;
  justify-content: center;
}

.section2 {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.show {
  padding: 20px;
  border: 2px black solid;
  width: 100%;
}

.section3 {
  display: flex;
  justify-content: center;
}

<div id="container">

  <div class="section1">
    <div class="header show"> header </div>
  </div>

  <div class="section2">
    <div class="column">
      <div class="content1 show"> content 1</div>
      <div class="content2 show"> content 2</div>
    </div>
    <div class="content3 show"> content 3</div>
  </div>

  <div class="section3">
    <div class="footer show"> footer</div>
  </div>

</div>

我嘗試使用overflow: auto;, overflow: hidden;，z-index: 1;但所有這些都不起作用。我這與divwidth: 100%;中的有關。.show我嘗試使用width: 60%;它來阻止它重疊，但它并沒有占據所有寬度。我應該怎么做才能.show在保持所有寬度的同時阻止 div 重疊？

uj5u.com熱心網友回復：

如果你使用box-sizing: border-box它會解決你的問題：原因是當你有時padding: 20px; width: 100%，它實際上會增加 40px 到已經 100% 的寬度，除非你明確設定這個 box-sizing 屬性。

* {
  box-sizing: border-box;
}

這將解決您的布局問題：請參閱您的 fiddle 的概念驗證修復。這也是為什么建議使用 CSS 重置的原因。

p/s：考慮在布局中使用 CSS 網格，這樣更容易推理。

uj5u.com熱心網友回復：

添加 * {box-sizing: border-box;}到您的代碼中。

更多關于盒子大小的資訊 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

uj5u.com熱心網友回復：

您的直接問題已經解決 - 正如其他人建議的那樣，您可以設定 box-sizing 以便將填充包含在尺寸中。

但是，由于使用了 flex，您的 HTML 相當復雜。您想要的布局看起來更像一個網格 - 網格適合 2D 型別的布局。

此片段簡化了您的 HTML - 每個元素都處于同一“級別”，需要洗掉單獨的部分。

grid-template-areas CSS 屬性用于布局內容。

* {
  box-sizing: border-box;
}

body {
  background-color: #D3D3D3;
}

#container {
  display: grid;
  grid-template-columns: 1fr 9fr;
  grid-template-areas: 'H H' 'C1 C3' 'C2 C3' 'F F';
  width: 100%;
  gap: 10px;
  padding: 20px;
}

.show {
  padding: 20px;
  border: 2px black solid;
  width: 100%;
}

.header {
  grid-area: H;
}

.content1 {
  grid-area: C1;
}

.content2 {
  grid-area: C2;
}

.content3 {
  grid-area: C3;
}

.footer {
  grid-area: F;
}

<div id="container">
  <div class="header show"> header </div>
  <div class="content1 show"> content 1</div>
  <div class="content2 show"> content 2</div>
  <div class="content3 show"> content 3</div>
  <div class="footer show"> footer</div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/506640.html

標籤：html css

上一篇：純HTML/CSS中的單選串列視圖？

下一篇：在顏色面板上拖動時更新顏色