如何将3个div并排对齐? [英] How can I align 3 divs side by side?

问题描述

我有3个div，分别为200px，300px和200px，如何将它们并排对齐，我所看到的所有示例仅包括2.

I have 3 div's, 200px,300px and 200px how can I align them side by side, all the examples I have seen only include 2. I have Div1,Div2 working correctly but Div3 for some reason slides under Div1 lie this picture

这是我的代码

<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 中的边框，如何使边框向右?

The Div1 has the shorter content on it, how can I make the border to the right as long as the border in Div2?

推荐答案

同一行中的所有元素

用包装器包装 div 元素:

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

然后设置包装纸的宽度，并使所有三个 div s浮动:

Then set the width of the wrapper, and float all three divs:

#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分开.这使代码更易于阅读和维护.

Also, use IDs and/or classes, and keep the CSS separate from the HTML. This makes the code easier to read and maintain.

小提琴.

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

要完成相同高度"部分，可以使用 display:table ， display:table-row 和 display:table-cell 以获得匹配的高度.它使用了一个额外的div，因此HTML看起来像:

To accomplish the "same height" part, you can use display:table, display:table-row, and display:table-cell to get matching heights. It uses an extra div, so the HTML looks like:

<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如下:

The floats can then be removed, so the CSS looks like:

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

小提琴.

Flexbox方式

如果您仅支持较新的浏览器(IE 10及更高版本)，Flexbox是另一个不错的选择.确保添加前缀以获得更好的支持.可以在此处中找到更多有关前缀的信息.

If you're only supporting newer browsers (IE 10 and up), Flexbox is another good choice. Make sure to prefix for better support. More on the prefixes can be found here.

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

Codepen .

网格方式

您现在也可以通过网格完成此操作如果您要支持旧版浏览器，则浏览器支持可能会成为问题.它与flexbox示例中的HTML相同，只是CSS不同:

You can accomplish this with grid now, too, though browser support might be an issue if you're supporting older browsers. It's the same HTML as with the flexbox example, with just different 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;
}

codepen .

这篇关于如何将3个div并排对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！