2

これは私が達成しようとしているものです: ここに画像の説明を入力

これまでのところ、これは私が持っているコードです。

列は正常に機能します。問題は、HTML の列の後に配置したものが、実際にはページの列の背後にあり、必要な列の下にないことです。

「テストボックス」divに使用しているcssに問題はありますか?

.test-box{
    background:red;
    width:100%;
    height:300px;
}

これを行うより良い方法はありますか？

4

7 に答える 7

5 
.test-box{
background:red;
width:100%;
height:300px;
clear:both;
}

clear: 両方とも、フロートの影響を受けないように他の div をクリアするため、後に配置します。

于 2013-08-30T15:32:05.423 に答える
0

clear: both;またはfloat: left;(3 列の div が幅全体を占める場合)を追加します。

于 2013-08-30T15:35:21.243 に答える
0

追加する必要があります

.test-box{clear:both;}

jsFiddle _

于 2013-08-30T15:35:28.320 に答える
0

テキストが変更されないことが 100% 確実でない限り、個人的には高さを px で設定しません。これを達成するにはさまざまな方法があります。1 つの方法は次のとおりです。

1）たとえば、各ボックス「.box」に単一のクラスを与えます

.box{
  width:33.33%;
  margin:20px 0 0 20px;
  float:left;
}

クリアすることも忘れないでください:これらのボックスの後に来るもの。

px ベースのソリューションを使用できますが、これはレスポンシブ ソリューションになります。それは本当に要件が何であるかに依存します。

于 2013-08-30T15:56:50.430 に答える
0

このクラスで

.three-columns div{
    ... 
    display:table-cell;

}

float:left を削除して、display:table-cell を追加するだけです

于 2013-08-30T15:51:52.940 に答える