0 
<html>
<head>

<style type="text/css">

.parent
{
    width: auto;
    height: auto;
    min-width: 600px;
    min-height: 600px;
    border: 1px dashed #f00;
    padding: 5px;
    overflow: auto;
    position: absolute;
}

.child
{
    width : 100px;
    height: 500px;
    border: 1px solid #0f0;
    float: left;
    position: relative;
}
.second_child
{
    width : 1800px;
    height: 100px;
    border: 1px solid black;
    float: left;
    position:relative;
}
</script>

</style>

</head>

<body style="overflow:auto">

<div class="parent">
    <div class="child">
    </div>
    <div class="second_child">
    </div>
</div>
</body>
</html>

大きな箱に2つの箱を入れようとしています。私はそれを隣り合わせにしましたが、2番目のボックスの幅をウィンドウの幅よりも大きくすると、正常に動作します。たとえば、画面が 1024x720、2 番目のボックスの幅が 1800px の場合、2 番目のボックスは最初のボックスの下に再配置されます。スクロールバーを配置せず、オブジェクトの位置を保持しない理由が気になります。

私の位置付けが間違っているのでしょうか、それともこれについて間違った方法で考えているのでしょうか。レイアウトとしてテーブルを使用してこれを試してみたくなりましたが、それは私にとって非常に直感的ではないようです。

4

2 に答える 2

0

スクロールバーを配置せず、オブジェクトの位置を保持しない理由が気になります。

これを強制.parentするように設定できます。overflow: scroll;

于 2012-10-11T23:38:21.857 に答える
0

これがフローティング DOM 要素の本質です。彼らは何も強制しません。それらを並べて表示したい場合は、コンテナーにコンテンツをサポートする幅 (> 1904px) を与える必要があります。

于 2012-10-11T23:28:28.783 に答える