如果没有浮动，如何在内容下对齐侧栏

时间：2014-03-14 11:36:16

标签： html css responsive-design css-float

我倾向于响应式设计，我遇到了这个问题。

下图显示全部 enter image description here

  1. A显示了大屏幕上的布局
  2. B通过删除 float：right;
    3. 显示我希望它如何在狭窄的屏幕上显示
  3. C显示删除浮动后我得到的内容：右侧边栏。

    4. 下面是我正在使用的代码的检查

      <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 个答案:

答案 0 :(得分：0)

你去吧

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;}

你需要明确：两者;不仅清楚：对;

答案 1 :(得分：0)

使用CSS media queries 

#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 DEMO

答案 2 :(得分：-1)

从旁边删除float:right时，请添加clear:left。

P.S。如果没有任何东西浮动，你就不需要明确：正确

答案 3 :(得分：-1)

使用NO浮标解决方案：

JSFIDDLE DEMO 

 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}}
相关问题
最新问题