如何讓div填充其父級的寬度？

Question

我想讓我的div s( .give , .sep , .take ) 填充它的父級 ( .trade ) 的寬度。

HTML 代碼：

<div class="trade">
  <div class="give"></div>
  <div class="sep"></div>
  <div class="take"></div>
</div>

CSS 代碼：

.trade {
  position: relative;
  width: 90%;
  height: 80px;
  border: 1px solid black;
}

.give,
.take {
  height: 100%;
  display: inline-block;
}
.sep {
  width: 20px;
  height: 100%;
  border-left: 1px solid black;
  border-right: 1px solid black;
  display: inline-block;
}

但是， .give,.take{width:auto;}沒有填充它。

我也試過：

.give,
.take {
  position:absolute;
  width:50%;
}
.sep {
  position:absolute;
  left:50%;
  transform:translate(-50%,0);
}
.give {
  left: 0;
}
.take {
  right: 0;
}

但是.give和.take侵入了.sep的位置。

我怎樣才能做到？ 如果可能的話，我不想使用 Javascript。

+) .give{margin-right:10px;}.take{margin-left:10px;}或.give{padding-right:10px;}.take{padding-left:10px;}不起作用，只是展開他們的寬度。

Answer 1

正如 G-Cyrillus 所說，您不應該嘗試破解float 。 在這種情況下， inline-block也完全沒有必要，而且對於您的目的來說太復雜了。

真正的工具是Flexbox 。 添加.trade { display: flex; } .trade { display: flex; }到 CSS 使用 flexbox。

然后你可以使用.give, .take { flex-grow: 1; } .give, .take { flex-grow: 1; }使它們擴展以平均填充整個父母的寬度。 您可以使用.trade { column-gap: 20px; }而不是使用邊距來分隔您的 3 個子元素。 .trade { column-gap: 20px; }相反。

 .trade { position: relative; width: 90%; height: 80px; border: 1px solid black; display: flex; column-gap: 20px; }.sep { width: 20px; }.give, .take { flex-grow: 1; } /* added for demonstration */.trade { background-color: red; }.give, .sep, .take { background-color: blue; }

 <div class="trade"> <div class="give"></div> <div class="sep"></div> <div class="take"></div> </div>

Answer 2

這是預期的結果嗎？ flexbox使這相當簡單....... .trade上的邊框和填充僅用於視覺輔助

 .trade{ display:flex; flex-direction:row; justify-content:space-around; align-content:center; border:1px solid red; padding:1rem; margin:0 auto; float:none; width:80%; height:10rem; }.trade div{ border:1px solid black; flex:1 }.trade div:before{ content:attr(class) }

 <div class="trade"> <div class="give"></div> <div class="sep"></div> <div class="take"></div> </div>