divを右に浮かせば、画面がぼやけます...私は明確なオプションを試しました

-2

フロートには一般的に問題があります。私はレイアウトをうまくやっていますが、浮かび上がるとページ全体が変わってしまいます。私は、何が起こっているのかをよりよく理解する必要があると思う。ここにhtmlとcssのコードがあります。divを右に浮かせば、画面がぼやけます...私は明確なオプションを試しました

* { 
 
\t margin: 0; 
 
} 
 
#heading { 
 
\t background-color: black; 
 
\t height: 150px; 
 
} 
 
#navigation { 
 
\t background-color: green; 
 
\t height: 30px; 
 
} 
 
#leftSide { 
 
\t background-color: blue; 
 
\t width: 400px; 
 
\t height: 700px; 
 
} 
 
#rightSide { 
 
\t background-color: red; 
 
\t width: 400px; 
 
\t height: 700px; 
 
\t float: right; 
 
} 
 
#footer { 
 
\t background-color: black; 
 
}

<body> 
 
\t <div id="wrapper"> 
 
\t <div id="heading">Heading</div> 
 
\t <div id="navigation">Navigation</div> 
 
\t <div id="leftSide">Left Side</div> 
 
\t <div id="rightSide">Right Side</div> 
 
\t <div id="footer">Footer</div> 
 
\t <div style="clear: right;"></div> 
 
\t </div> 
 
</body>

出典

2016-09-02 thetekkenmaster

あなたのフッターにしたとき、 'フロート上がる..' rightSide'にright'問題ということでしょうか？ – kukkuz

ここに質問はありません。私はそれを閉じるために投票する。 – Rob

使用display:inline-block;あなたのidの要素をINGのleftSide

#heading { 
 
\t background-color: black; 
 
\t height: 150px; 
 
} 
 
#navigation { 
 
\t background-color: green; 
 
\t height: 30px; 
 
} 
 
#leftSide { 
 
\t background-color: blue; 
 
\t width: 50%; 
 
\t height: 700px; 
 
    display:inline-block; 
 
} 
 
#rightSide { 
 
\t background-color: red; 
 
\t width: 50%; 
 
\t height: 700px; 
 
\t float: right; 
 
} 
 
#footer { 
 
\t background-color: black; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>This is it</title> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
\t <div id="wrapper"> 
 
\t <div id="heading">Heading</div> 
 
\t <div id="navigation">Navigation</div> 
 
\t <div id="leftSide">Left Side</div> 
 
\t <div id="rightSide">Right Side</div> 
 
\t <div id="footer">Footer</div> 
 
\t <div style="clear: right;"></div> 
 
\t </div> 
 
</body> 
 
</html>

出典

2016-09-02 05:09:13 Gowtham

Floatのための新しいblock formatting contextを作成し、それはでなければなりません前の内容より下に来ることが予想される場合は、footerの前にを編集してください。

もし私が正しく思うのであれば、float: leftleftSide divが必要です。

clear: right divをフッターの上に置き、clear: bothにしました。下の

スニペット：

* { 
 
    margin: 0; 
 
} 
 
#heading { 
 
    background-color: black; 
 
    height: 150px; 
 
} 
 
#navigation { 
 
    background-color: green; 
 
    height: 30px; 
 
} 
 
#leftSide { 
 
    background-color: blue; 
 
    width: 400px; 
 
    height: 700px; 
 
    float: left; 
 
} 
 
#rightSide { 
 
    background-color: red; 
 
    width: 400px; 
 
    height: 700px; 
 
    float: right; 
 
} 
 
#footer { 
 
    background-color: black; 
 
}

<body> 
 
    <div id="wrapper"> 
 
    <div id="heading">Heading</div> 
 
    <div id="navigation">Navigation</div> 
 
    <div id="leftSide">Left Side</div> 
 
    <div id="rightSide">Right Side</div> 
 
    <div style="clear: both;"></div> 
 
    <div id="footer">Footer</div> 
 
    </div> 
 
</body>

出典

2016-09-02 07:26:24 kukkuz

divを右に浮かせば、画面がぼやけます...私は明確なオプションを試しました

答えて

関連する問題