html中排列div一行三个,CSS在一行中创建3个div块，div结构

6 个答案:

答案 0 :(得分：9)

有许多方法可以做到这一点，其中一种方法是使用relative-float

Block1

Block2

Block3

这会产生类似的内容

答案 1 :(得分：3)

怎么样：

a

b

c

使用CSS：

div {

width: 33%;

border: 1px solid red;

float: left;

}

答案 2 :(得分：2)

如果您要求使用HTML代码来完成问题所示的视觉效果，则可以在

答案 3 :(得分：2)

CSS：

.div {

display:inline-block;

width:150px;

height:400px;

margin:0;

}

#one {

background:green;

}

#two {

background:red;

}

#three {

background:blue;

}

HTML：

您可以使用CSS display属性。并指定inline-block。

答案 4 :(得分：2)

三个div：

用css：

div {

display: inline-block;

}

将所有内容放入这些div中。

您也可以使用float：left而不是display属性。

如果你想要一个液体布局(第一个和最后一个div有一个固定的宽度而中间的一个占用了所有需要的空间)，你可以：

.firstDiv {

float: left;

width: 200px;

}

.lastDiv {

float: right;

width: 200px;

}

.middleDiv {

margin-left: 200px;

margin-right: 200px;

}

你也可以使用绝对定位：

body {

position: relative;

}

.firstDiv {

position: absolute;

top: 0px;

bottom: 0px;

left: 0px;

width: 200px;

}

.lastDiv {

position: absolute;

top: 0px;

bottom: 0px;

left: 200px;

right: 200px;

}

.middleDiv {

position: absolute;

top: 0px;

bottom: 0px;

right: 0px;

width: 200px;

}

答案 5 :(得分：1)

看看this JS小提琴代码：

Red

Green

Blue

div {

display:inline-block;

width:100px;

height:200px;

}

._1 {

background-color:red;

}

._2 {

background-color:green;

}

._3 {

background-color:blue;

}