現在、列ベースのスクロール可能な水平レイアウトを作成しようとしています。float: leftとをいじってposition: absoluteみたところ、意図したとおりに動作しないことがわかったので、非常に単純な HTML に戻りましたが、残念ながら、私のコードはまだ期待どおりに動作していません。
現在、次の HTML を使用しています。
<div id="content">
<div style="height: 600px; width: 1320px;">
<div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div>
<div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div>
<div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div>
<div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div>
<div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 20px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div>
<div class="newsify_column" style="display: inline-block; width: 200px; margin-right: 0px;">some text can be put here, but it is made sure that this column is never higher than 600px!</div>
</div>
</div>
(ここのJSFiddle )
基本的には機能していますが、私が抱えている問題は、content-div がその子 div のサイズを無視していて、body タグにも正しいサイズがないことです! -divのcontent高さは正しいですが、幅はブラウザ ウィンドウの幅であり、1320px ではありません。これは、幅を 100% にしたいページ上の他の要素のサイズが正しくなく、content-div でマージンやパディングを使用できないことを意味するため、悪いことです。
ここで何が起こっているのかよくわかりません。フロートや絶対要素を使用せず、明示的にサイズ設定された要素を持っています。content-div がこれを無視するのはなぜですか? 子を含めるのに必要なサイズを持つべきではありませんか? ありがとう！