html怎么让图片并排3个,Html和CSS我如何可以并排3个div

将div元素包装在包装器中：

first

second

third

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

}

此外，使用ID和/或类，并将CSS与HTML分离。这使得代码更容易阅读和维护。

编辑：

我刚刚注意到“同样高度”的部分。您可以使用display：table，display：table-row和display：table-cell来获取匹配的高度。它使用一个额外的div，所以HTML看起来像：

first

second

third

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

}

更新

如果您只支持较新的浏览器(IE 10及更高版本)，Flexbox是另一个不错的选择。确保前缀以获得更好的支持。更多关于前缀可以找到here。

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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!

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!

CSS

.container {

display:flex;

justify-content:center;

}

.container > div {

margin:10px;

background-color:#bada55;

}

.first, .third {

width:200px;

}

.second {

width:300px;

}