CSS在一行中创建3个div块，div结构

Question

也许有人可以帮助我使用divs结构代表上面的图像，如果有持有者div的任何特殊的css参数，或者其他也添加它们？

Answer 1

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

<div style="position:relative">
    <div style="float:left; width: 50px; height:100px; background-color:red;">Block1
    </div>
    <div style="float:left; width: 50px; height:100px; background-color:blue;">Block2
    </div>
    <div style="float:left; width: 50px; height:100px; background-color:green;">Block3
    </div>
</div>

这会产生类似

的内容

Answer 2

怎么样：

<div>a</div>
<div>b</div>
<div>c</div>

使用CSS：

div {
  width: 33%;
  border: 1px solid red;
  float: left;
}

Answer 3

如果您要求使用HTML代码来完成问题所示的视觉效果，则可以在 http://csslayoutgenerator.com/ 这里生成html布局。

Answer 4

Working Fiddle

CSS：

.div {
display:inline-block;
width:150px;
height:400px;
margin:0;
}
#one {
background:green;
}
#two {
background:red;
}
#three {
background:blue;
}

HTML：

<div class="div" id="one"></div>
<div class="div" id="two"></div>
<div class="div" id="three"></div>

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

Answer 5

三个div：

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

Answer 6

看看this JS小提琴代码：

<div class="_1">Red</div>
<div class="_2">Green</div>
<div class="_3">Blue</div>

div {
    display:inline-block;
    width:100px;
    height:200px;
}

._1 {
    background-color:red;
}

._2 {
    background-color:green;
}

._3 {
    background-color:blue;
}