4

見やすいです。例 1 ではすべて問題なく動作しますが、例 2) でさらに 1 行のコードを追加すると、機能しなくなります。なんで？そして、どのようにコーディングすればよいですか？

例 1: http://jsfiddle.net/sUtvd/154/

[...].tripple {
width: 90%;
margin: 5%;
}[...]

例 2: http://jsfiddle.net/Ec95D/3/

[...].tripple {
width: 90%;
margin: 5%;
border: solid;
}[...]
4

6 に答える 6

1

追加

display: inline-block;

トリプルへ

http://jsfiddle.net/LaN5z/1/

于 2013-11-06T16:07:48.903 に答える
1

境界線が div を一周する必要がある場合は、float:left を .tripple に追加します。

于 2013-11-06T16:01:51.673 に答える
0

clear:both私は個人的に、これらの機会に対応する div を使用しています。このフィドルを確認してください。

http://jsfiddle.net/Ec95D/7/

于 2013-11-06T16:10:47.603 に答える
0

フロートをクリアする必要があります。すべての子要素がフローティングの場合、親はそれらの高さを認識しないため、折りたたまれます。親に clearfix のようなものを配置すると、問題が解決するはずです。clearfixの詳細については、http: //nicolasgallagher.com/micro-clearfix-hack/ を参照してください。

実際の例については、 http://jsfiddle.net/designingsean/Ec95D/4/を参照してください。リンクのCSSは以下です。.cf次に、親要素に追加します。

.cf:before,
.cf:after {
  content: " ";
  display: table;
} 

.cf:after {
  clear: both;
}

ほとんどの場合、最も理にかなってoverflowいますが、親にほとんどすべてのセットを持たせることもできます。その実際の例については、 http://jsfiddle.net/designingsean/cx7Wg/autoを参照してください。

clearfix とオーバーフローの詳細については、このかなり堅実な SO の質問と回答を確認してください: 「clearfix」のどの方法を使用できますか?

于 2013-11-06T16:01:15.173 に答える
0

フロートをクリアする必要があります。HTML5 biolerplate からこの標準 css を使用できます。

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

フィドル

<div class="tripple clearfix">
于 2013-11-06T16:02:20.697 に答える
0

float プロパティ:

.left, .right, .middle {
    float:left;
    width: 33%;
    height: 100px;
}

親 div を空にします。Float は CSS ポジショニング プロパティです。

より良いアプローチがあるかもしれませんが、簡単な方法は、色付きの各ボックスをセル間隔とパディングが 0 のテーブルに配置することです。

于 2013-11-06T16:14:57.133 に答える