0

私はウェブデザインの初心者です。左に1つ、右に1つある2つのボックスをデザインしたいです。ボックスはブラウザの最大化状態で修正されますが、ブラウザのサイズを変更して最小化すると、右のボックスが左のボックスの下に移動します。

これが私のコードです：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" >
        <link type="text/css" rel="stylesheet" href="style.css" />
        <title>.: Home :.</title>
    </head>
    <body>
        <div class="main" >
            <div class="left" >&nbsp;</div>
            <div class="right" >
                <div class="search" >&nbsp;</div>
                <div class="login" >&nbsp;</div>
            </div>
        </div>
    </body>
</html>

スタイル.css

body {
    margin: 0px;
    padding: 0px;
    background-color: #c4c4c4;
}

div.main {
    width: 100%;
    display: inline-block;
    background-color: red;
}

div.left {
    float: left;
    width: 300px;
    height: 500px;
    margin-top: 50px;
    margin-left: 100px;
    display: inline-block;
    background-color: blue;
}

div.right {
    float: right;
    width: 800px;
    height: 500px;
    margin-top: 50px;
    margin-right: 100px;
    display: inline-block;
    background-color: green;
}

ここに画像の説明を入力

ここに画像の説明を入力

4

3 に答える 3

1

メインDIVに固定幅が必要です

div.main {
    width: 1350px;
    display: inline-block;
    background-color: red;
}

クラスの代わりに可能な場合は id を使用してください。より高速です。たとえばclass="main"、ID にすることができます。

ワーキングデモ

編集

メイン div で 100% の幅が必要な場合は、固定幅のラッパー div を使用します。

<div class="main" >
   <div id="wrapper" style="width:1350px;"> 
      <div class="left" >&nbsp;</div>
       <div class="right" >
            <div class="search" >&nbsp;</div>
            <div class="login" >&nbsp;</div>
       </div>
    </div>
</div>

メイン DIV が 100% の DEMO を更新

于 2012-11-23T11:00:41.400 に答える
0

div.main の幅を % から px に変更します。また、ブラウザがその前に要素を縮小しないように最小幅を設定することもできます。

于 2012-11-23T11:09:14.917 に答える
0

これは、ボックスの幅が固定され、マージンがあるためです。ブラウザ ウィンドウのサイズを変更して、両方のボックスを並べて表示するために必要なスペースよりも小さくなると、右側のボックスが左側のボックスの下に表示され、スペースができます。

あなたの説明の詳細から、これに対する修正はありません。ただし、割合に基づいてレイアウトを作成するようにしてください (例: width:25%)。

于 2012-11-23T11:05:25.863 に答える