私は以下のように浮動小数点数を使って3つのdivを並べて作成しましたが、幅100％と高さの下に1つのdivを追加する方法は不明です。私は単純にdiv要素を作成してみましたが、それは単に表示されていないと、それは簡単なコーディングエラーだかがあればより多くの私はfloatの後にdivを追加する
.first-div {
width:33.33%;
height:150px;
float:left;
background-color:pink;
}
.second-div {
width:33.33%;
height:150px;
float:left;
background-color:blue;
}
.third-div {
width:33.33%;
height:150px;
float:left;
background-color:purple;
}
を行う必要がある何かが第四DIVに
.first-div {
width: 33.33%;
height: 150px;
float: left;
background-color: pink;
}
.second-div {
width: 33.33%;
height: 150px;
float: left;
background-color: blue;
}
.third-div {
width: 33.33%;
height: 150px;
float: left;
background-color: purple;
}
.fourth-div {
clear: both;
background: yellow;
height: 150px;
}<div class="first-div"></div>
<div class="second-div"></div>
<div class="third-div"></div>
<div class="fourth-div"></div>clear: both;を追加わからないん
.first-div {
width: 33.33%;
height: 150px;
float: left;
background-color: pink;
}
.second-div {
width: 33.33%;
height: 150px;
float: left;
background-color: blue;
}
.third-div {
width: 33.33%;
height: 150px;
float: left;
background-color: purple;
}
.fourth-div {
width: 100%;
height: 150px;
float: left;
background-color: black;
}<div class="first-div">shashi</div>
<div class="second-div">shashi</div>
<div class="third-div">shashi</div>
<div class="fourth-div">shashi</div>最初の3つのDivをそれぞれのdivに配置します。この新しい親divがrelativeに、position内の3 divの位置が絶対になるように位置を設定します。
最後に、3番目のdivの後に4番目のdivを配置し、その位置を相対に設定します。
これは、将来の相互作用を100％にするdivのid = columnSetの幅とに内部divを設定し
<div id=columnSet>
<div class=column></div>
<div class=column></div>
<div class=column></div>
</div>
<div id=singleDiv></div>
に干渉します少ない入力を必要とし、コードにはあまり余地を残す最も単純な答えですそれぞれ33％の列を作成します。 divが自動的に整列します。
あなたのコーディングで最高の運があります！
Clearfixは問題の解決策になるはずです。あなたはここでhttps://www.w3schools.com/css/css_float.aspを読むことができます。私はclearfix divに最初の3つのdivをラップすることをお勧めします。別の解決策があります
.clearfix::after {
content: "";
clear: both;
display: table;
}
.first-div {
width: 33.33%;
height: 150px;
float: left;
background-color: pink;
}
.second-div {
width: 33.33%;
height: 150px;
float: left;
background-color: blue;
}
.third-div {
width: 33.33%;
height: 150px;
float: left;
background-color: purple;
}
.last-div {
margin: 25px 0 0 0;
height: 50px;
background-color: green;
width: 100%;
}<div class="clearfix">
<div class="first-div"> </div>
<div class="second-div"> </div>
<div class="third-div"> </div>
</div>
<div class="last-div"> </div>、.clearfixクラスで新しい<div>要素を作成します。
.clearfix{
display: block;
content: "";
clear: both;
}
またはそれ以上：
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
このハックは、あなたがあなたのページにこのような分離を作りたい便利毎回なります。このハックは多くのフレームワーク（Bootstrap for example）で使用されています。
/*Clearfix*/
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/*My css*/
.first-div {
width:33.33%;
height:150px;
float:left;
background-color:pink;
}
.second-div {
width:33.33%;
height:150px;
float:left;
background-color:blue;
}
.third-div {
width:33.33%;
height:150px;
float:left;
background-color:purple;
}
.forth-div{
height:150px;
background-color:red;
}<div class="first-div"></div>
<div class="second-div"></div>
<div class="third-div"></div>
<div class="clearfix"></div>
<div class="forth-div"></div>コンテキストのためのHTMLを追加
<html>
<head>
<title></title>
<style>
.first-div {
width: 33.33%;
height: 150px;
float: left;
background-color: pink;
}
.second-div {
width: 33.33%;
height: 150px;
float: left;
background-color: blue;
}
.third-div {
width: 33.33%;
height: 150px;
float: left;
background-color: purple;
}
.fourth-div {
width: 100%;
display: inline-block;
background: yellow;
height: 150px;
}
</style>
</head>
<body>
<div class="first-div"></div>
<div class="second-div"></div>
<div class="third-div"></div>
<div class="fourth-div" ></div>
</body>
</html>
このコードを試してみてください、常にCSS/JavaScriptの質問と便利です。 [mcve]をご覧ください。 –