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

Question

也许任何人都可以帮助我处理代表上图的 div 结构，以及是否有任何特殊的持有者 div 的 css 参数，或者其他添加它们？

Answer 1

有很多方法可以做到这一点，其中一种是相对浮动

<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

工作小提琴

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>

您可以使用 CSSdisplay属性。并指定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

看看这个JS Fiddle 代码：

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