css - 1 行に 3 つの div ブロックを作成する CSS、div 構造

Question

上の画像を表す div 構造を手伝ってくれる人がいるかもしれません。また、ホルダー div の特別な css パラメータがある場合、または他にもそれらを追加できますか?

Answer 1

これを行うには多くの方法がありますが、そのうちの 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

3 つの div :

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

css を使用:

div {
 display: inline-block;
}

必要なすべてのコンテンツをこれらの div に入れます。

display プロパティの代わりに float:left を使用することもできます。

リキッド レイアウトが必要な場合 (最初と最後の div は固定幅で、中央の 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;
}