如何並排對齊 3 個 div？

Question

我有 3 個 div，200 像素、300 像素和 200 像素，我如何將它們並排對齊，我見過的所有示例都只包括 2 個。我有 Div1、Div2 工作正常但 Div3 出於某種原因在 Div1 下的幻燈片是這張圖片

這是我的代碼

<div style=" border-right:1px solid black; width:200px; float:left; position:relative; ">
 //div1
 </div>

  <div style=" border-right:1px solid black; width:300px; padding:10px;float:left; position:relative;">
    //div2
  </div>
 
<div style=" float: left; width: 200px;position:relative">
//div3
 </div>

Div1上的內容較短，如何使邊框與Div2 中的邊框一樣長？

Answer 1

一行中的所有元素

將div元素包裝在包裝器中：

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

然后設置包裝器的寬度，並浮動所有三個div ：

#wrapper {
  width:700px;
  clear:both;
}
#first {
  background-color:red;
  width:200px;
  float:left;
}
#second {
  background-color:blue;
  width:300px;
  float:left;
}
#third {
  background-color:#bada55;
  width:200px;
  float:left;
}

此外，使用 ID 和/或類，並將 CSS 與 HTML 分開。 這使得代碼更易於閱讀和維護。

小提琴。

一行中的所有元素，高度相同

要完成“相同高度”部分，您可以使用display:table 、 display:table-row和display:table-cell來獲取匹配的高度。 它使用了一個額外的 div，所以 HTML 看起來像：

<div id="wrapper">
  <div id="row">
    <div id="first">first</div>
    <div id="second">second<br><br></div>
    <div id="third">third</div>
  </div>
</div>

然后可以刪除浮點數，因此 CSS 如下所示：

#wrapper {
  display:table;
  width:700px;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:200px;
}
#second {
  display:table-cell;
  background-color:blue;
  width:300px;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:200px;
}

小提琴。

彈性盒方式

如果您只支持較新的瀏覽器（IE 10 及更高版本），Flexbox 是另一個不錯的選擇。 確保前綴以獲得更好的支持。 可以在此處找到有關前綴的更多信息。

HTML

<div class="container">
  <div class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione rerum deserunt reiciendis numquam fugit dolor eligendi fuga sit. Hic, tempore. Error, temporibus possimus deserunt quisquam rerum dolor quam natus.Fugiat nam recusandae doloribus culpa obcaecati facere eligendi consectetur cum eveniet quod et, eum, libero esse voluptates. Ut commodi consequuntur eligendi doloremque deserunt modi animi explicabo aperiam, non, quas qui!</div>
  <div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet obcaecati, rem. Ullam quia quae, ad, unde saepe velit incidunt, aliquid eum facere obcaecati molestiae? Repellendus tempore magnam facere, sint similique!</div>
</div>

CSS

.container {
  display:flex;
  justify-content:center;
}
.container > div {
  margin:10px;
  background-color:#bada55;
}
.first, .third {
  width:200px;
}
.second {
  width:300px;
}

代碼筆。

網格方式

您現在也可以使用grid來完成此操作，但如果您支持舊瀏覽器，則瀏覽器支持可能是一個問題。 它與 flexbox 示例的 HTML 相同，只是 CSS 不同：

CSS

.container {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 10px;
  width:700px;
}
.container > div {
  background-color:#bada55;
}
.first, .third {
  width:200px;
}
.second {
  width:300px;
}

代碼筆。

Answer 2

HTML代碼是

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

CSS 將是

#wrapper {
  display:table;
  width:100%;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:33%;
}
#second {
  display:table-cell;
  background-color:blue;
  width:33%;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:34%;
}

此代碼將調整響應式布局，因為它會調整

<div> 

根據設備寬度。 甚至可以讓任何人沉默

<div>

作為

<!--<div id="third">third</div> --> 

並且可以使用兩個休息兩個

<div> 

並排。