2

この質問は言葉で説明するのが難しいので、jsFiddle にリンクします。jsFiddle . リンクのいずれかを見ると、さまざまなレベルにあるいくつかのボックスが表示されます。これらは、ここに表示されているように、画面全体に並べて表示されるはずです。要素の上に奇妙な垂直方向のスペースが表示されるのを防ぎ、適切に並べて表示するにはどうすればよいですか? 各要素のコンテンツの高さが違うことが原因だと思うのですが、直し方がわかりません。jsFiddle:
HTMLで見つけることができるコードは次のとおりです。

<div id="elements">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id nunc ut erat facilisis pharetra. Sed egestas gravida mattis.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu lectus eu purus pulvinar tincidunt. Phasellus at elit id nulla volutpat gravida sit amet vitae lorem. Nunc mattis venenatis varius. Aenean nec odio lorem. Nulla in turpis sed velit venenatis lacinia eget id ante. Maecenas quis massa nunc.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</div>

CSS:

#elements div {
    display:inline-block;
    width:250px;
    height:250px;
    border:solid thin #000;
}
4

2 に答える 2

0

これを修正するためのテクニックはたくさんあります。これらの要素を次のようにフロートするか-

#elements div {
    display:inline-block;
    width:250px;
    height:250px;
    border:solid thin #000;
    float:left;
}

またはvertical-align: top;、インラインブロック要素の場合、flaot の方がより堅牢で、どのブレークポイントでも持続せず、ボディにリセットを適用していない場合に購入すると思います。

于 2013-04-06T20:27:01.100 に答える
0

vertical-align: top;CSS ルールに追加します。

于 2013-04-06T04:22:54.617 に答える