Html和CSS如何可以并排3个div [英] Html and CSS how can i align 3 divs side by side

问题描述

我有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 的内容较短，

解决方案

包装包装器中的 div 元素：

 < div id = wrapper> 
< div id =first>第一< / div> 
< div id =second>第二< / div> 
< div id =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和/或类， HTML。这使得代码更易于阅读和维护。

小提琴。

编辑：

您可以使用 display：table ， display：table-row 和 display： cell 以获得匹配的高度。它使用一个额外的div，所以HTML看起来像：

 < div id =wrapper> 
< div id =row> 
< div id =first>第一< / div> 
< div id =second>第二< br>< br>< / div> 
< div id =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; 
} 
  

$ b

$ b

'只支持较新的浏览器（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，临时。 Error，temporibus possatus deserunt quisquam rerum dolor quam natus.Fugiat nam recusandae doloribus culpa obcaecati facere eligendi consectetur cum eveniet quod et，eum，libero esse voluptates。 < / div>< / div>< / div>< / div> 
< div class =third> Lorem ipsum dolor sit amet，consectetur adipisicing elit。阿梅特·奥贝卡蒂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 。

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

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.

解决方案

Wrap the div elements in a wrapper:

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

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

The fiddle.

Edit:

I just noticed 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>

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

The fiddle.

Update

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.

The 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

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

The Codepen.

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