Html和CSS如何对齐3 div

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

我有3个div, 200px,300px和200px我怎么把它们并排排列，我看到的所有例子都只有2个。我有Div1和Div2可以正常工作但是由于某种原因，Div3的幻灯片在Div1下面有这幅图

This is my code

这是我的代码

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

The Div1 has the shorter content on it, how can i make the border to the right as long as the border in Div2 , thanks for any help.

Div1的内容比较短，我怎么能把这个边框一直画到Div2的边框，谢谢大家的帮助。

2 个解决方案

#1

All the elements in one line

一行中的所有元素

Wrap the div elements in a wrapper:

将div元素封装在一个包装器中:

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

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

然后设置包装的宽度，浮动三个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;
}

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

另外，使用id和/或类，并将CSS与HTML分开。这使得代码更易于阅读和维护。

The fiddle.

小提琴。

All elements in one line, same height

所有元素在同一直线上，相同高度。

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:

要完成“相同高度”部分，可以使用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>

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

然后可以删除浮动，因此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;
}

The fiddle.

小提琴。

The Flexbox Way

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.

如果你只支持更新的浏览器(10个以上)，那么Flexbox是另一个不错的选择。确保前缀以获得更好的支持。更多的前缀可以在这里找到。

The HTML

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>

The CSS

CSS

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

The Codepen.

Codepen。

The Grid Way

网格的方法

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:

您现在也可以使用grid来实现这一点，但是如果您支持旧的浏览器，那么浏览器支持可能是一个问题。它和flexbox的例子是一样的HTML，只是有不同的CSS:

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

The codepen.

codepen。

#2

The HTML code is

HTML代码是

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

The CSS will be

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

This code will workup towards responsive layout as it will resize the

这段代码将在调整响应布局大小时进行调整

<div> 

according to device width. Even one can silent anyone

根据设备宽度。任何人都可以沉默

<div>

as

作为

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

and can use rest two for two

可以用休息两小时

<div> 

side by side.

并排。