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

CSS creating 3 div blocks in one line, div structure

提问by Tautvydas

Maybe anyone could help me with divs structure which would represent image above and if there are any special css parameters of holder div, or other add them too?

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

回答by alexb

The are many ways to do that, one of them is with 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>

This generates something like

这会产生类似的东西

回答by FurloSK

How about:

怎么样：

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

with CSS:

使用 CSS：

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

?

?

回答by Sowmya

If you are asking for html code to get the visual done as shown in your question, this is the place http://csslayoutgenerator.com/, where you can generate the html layouts.

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

回答by Muhammad Talha Akbar

Working Fiddle

工作小提琴

CSS:

CSS：

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

HTML:

HTML：

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

You can use CSS displayproperty. And Specifying inline-block.

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

回答by Jerome Cance

three div :

三格：

<div></div><div></div><div></div>

with css :

使用 css ：

div {
 display: inline-block;
}

put into these div all content you want.

把你想要的所有内容都放入这些 div 中。

You can also use float:left instead of display property.

您还可以使用 float:left 代替 display 属性。

If you want a liquid layout (first and last div have a fixed width and the middle one take all the needed space), you can :

如果你想要一个流动的布局（第一个和最后一个 div 有一个固定的宽度，中间的一个占据所有需要的空间），你可以：

.firstDiv {
  float: left;
  width: 200px;
}

.lastDiv {
  float: right;
  width: 200px;
}

.middleDiv {
  margin-left: 200px;
  margin-right: 200px;
}

you can also use absolute positioning :

您还可以使用绝对定位：

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

回答by madhead

Take look at thisJS Fiddle code:

看看这个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;
}