0

2つ並べdivてみました。両方divの が another に含まれていdivます。

これは私が書いた HTML と CSS コードで、ひどく間違っています。

HTML :

<div id="content">     
 <div id="main"></div>
 <div id="sidebar"></div>     
</div>

CSS :

 #content {
    width: 1000px;        
}
#sidebar {
    width: 200px;
    float: left;
    height: 400px;
    background-color: red;
}
#main {
    width: 800px;
    margin-left: 200px;
    height: 400px;
    float: left;
    background-color: blue;
}

ここにjsFiddleがあります

EDIT：最終的に私のために働いたコードは次のとおりです：

<div id="content">

 <div id="sidebar"></div>
 <div id="main"></div>

</div>

css は次のとおりです。

#content {
    width: 1000px;
    overflow: auto;
}
#sidebar {
    width: 200px;
    height: 400px;
    float: left;
}
#main {
    width: 800px;
    height: 400px;
    margin-left: 200px;
}

理由はわかりませんが...

overflow : auto;

正しく表示するために必要でした。

4

5 に答える 5

1

を取り除くmargin-left: 200px;

jsFiddle の例

これは、青色の div を右に押し出し、赤色の div をドロップダウンさせます。これは、両方が隣り合って存在するための十分なスペースがないためです。

于 2013-05-15T12:12:59.803 に答える
1

CSS から margin-left を削除します。

#main {
    width: 800px;
    height: 400px;
    background-color: blue;
}
于 2013-05-15T12:13:24.250 に答える
1

ちょっと Narendera さん、あなたのparent div's幅は1000pxmargin-leftで、 子 div に与えた#mainので、それが下がっているので、子 divmargin-left:200pxから 削除する必要があります #main

CSS

  #content {
    overflow: hidden;
    width: 1000px;
}

#main {
    background-color: blue;
    float: left;
    height: 400px;
    width: 800px;
}


#sidebar {
    background-color: red;
    float: left;
    height: 400px;
    width: 200px;
}

これにより、正常に動作します.....デモを参照してください

于 2013-05-15T12:13:53.320 に答える
0

コードを確認しました。#sidebar から float: left を削除するだけです。

#sidebar {
width: 200px;
#float: left;
height: 400px;
background-color: red;
}
于 2013-05-15T12:20:25.240 に答える