Html和CSS如何将3个div并排排列

Question

我有3个div，200px，300px和200px我怎么能并排排列它们，我看到的所有例子都只包括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 s：

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

fiddle。

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

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

fiddle。

Flexbox Way

如果您只支持较新的浏览器（IE 10及更高版本），Flexbox是另一个不错的选择。请务必使用前缀以获得更好的支持。有关前缀的更多信息，请参见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。

网格方式

您现在也可以使用grid完成此操作，但如果您支持较旧的浏览器，browser support可能会出现问题。它与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;
}

codepen。

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> 

并排。