Html和CSS如何将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>

然后设置包装器的宽度,并浮动所有三个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分开.这使代码更易于阅读和维护.

的小提琴.

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

为了实现"同一高度"的一部分,你可以使用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;
}

的小提琴.

Flexbox方式

如果您只支持更新的浏览器(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;
}

该Codepen.

网格方式

您现在也可以使用网格完成此操作,但如果您支持旧浏览器,浏览器支持可能会成为问题.它与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.