如果未浮動，如何在內容下方對齊側欄
[英]How to align side bar beneath content if not floated
問題描述
我傾向於響應式設計，因此遇到了這個問題。
下圖顯示了所有
- A顯示如何在大屏幕上顯示布局
- B通過刪除float：right來顯示我希望它在窄屏上的顯示方式；
- C顯示了刪除側邊上的float：right之后我得到的結果。
以下是我正在使用的代碼的考試
<doctype html>
<html>
<head>
<title>Test</title>
<style>
#container{width:100%; height:700px; background:blue; -moz-box-sizing:border-box; padding:10px;}
#box{width:60%; height:70px; background:black;}
#content{width:70%; height:600px; float:left; background:green; margin-top:10px;}
#aside{width:30%; height:800px; float:none; clear:right; background:yellow;}
</style>
</head>
<body>
<div id="container">
<div id="box">
</div>
<div id="content">
</div>
<div id="aside">
</div>
</div>
</body>
</html>
就是這樣： http ： //jsfiddle.net/cBh6z/
4 個解決方案
解決方案1
0 2014-03-14 11:40:32
干得好
JSFIIDLE DEMO
#container {width:100%; min-height:700px; background:blue; -moz-box-sizing:border-box; padding:10px;}
#box {width:60%; height:70px; background:black;}
#content {width:70%; height:600px; float:left; background:green; margin-top:10px;}
#aside {width:30%; height:800px; float:none; clear:both; background:yellow;}
您需要清除： 不僅清楚
解決方案2
0 2014-03-14 11:54:55
使用CSS媒體查詢
#container{
width:100%;
height:700px;
background:blue;
box-sizing:border-box;
padding:10px;
}
#box{
width:60%;
height:70px;
background:black;
}
#content{
width:70%;
height:600px;
background:green;
margin-top:10px;
float:left;
}
#aside{
width:30%;
height:800px;
background:yellow;
float:right;
}
@media (max-width: 400px) {
#content,#aside{
display:block;
float:none;
}
#aside{
margin-top:20px;
}
}
JSFIDDLE演示
解決方案3
-1 2014-03-14 11:41:06
當您從一邊移除float:right ，添加clear:left 。
ps如果沒有任何東西浮動正確，則不需要clear：right
解決方案4
-1 已采納 2014-03-14 11:53:41
沒有浮點的解決方案：
JSFIDDLE演示
body{margin:0;min-width:500px;}
#container{color:white;width:100%; height:700px; background:blue;padding:10px}
#box{width:60%; height:70px; background:black;margin-bottom:10px}
#content{width:60%; height:300px;background:lightgreen;margin-bottom:10px}
#aside{position:absolute;right:0;top:0;width:30%; height:400px;background:green;margin:10px 10px 0 0}
@media(max-width: 500px){#aside{position:static}}
如何將div的內容與向左浮動的內容元素居中對齊？
[英]How do I center align a div's content with content elements floated towards the left?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.