3

在此处输入图像描述

我是 CSS 新手，这让我很困惑。

  1. 如何让父 div 始终包含其子级？一旦我开始使用浮点数进行对齐，父级就停止包含子级。
  2. 我其实不想浮动的东西。我想对齐它们。我们如何在 CSS 中进行对齐和边距，而不是对所有维度进行硬编码？
  3. 有人可以为此提供CSS吗？为了这个例子，让我们假设总宽度为 960 像素，所有边距为 15 像素；
4

7 回答 7

7

三种选择：

  1. 设置clear: both在绿色元素上。
  2. overflow: hidden在父容器上设置。
  3. 在父容器上使用clearfix 。
于 2012-06-22T09:26:59.513 回答
5

让我们看一个清晰灵活的版本：

#container { background: gray; overflow: hidden; padding: 15px; }
#left { background: purple; width: 200px; float: left; margin: 0 15px 15px 0; } 
#content { background: blue; overflow: hidden; margin: 0 0 15px 0 } 
#footer { background: green; height: 50px; clear: left; }

即使是widthand heightyou see set 也是不必要的，框可以在省略时调整其内容，我只是出于演示目的添加它们。

于 2012-06-22T09:43:22.003 回答
2

看看这个：http: //jsfiddle.net/kMQbt/

html:

<div id="parent">
 <div id="purple">
     purple
 </div>
 <div id="blue">
     blue
 </div>
 <div id="green">
     green
 </div>
</div>​

CSS：

#parent{
 width: 960px;
 background-color: grey;    
 float:none;
 padding-bottom: 15px;
}

#purple{
 width: 200px;
 height: 200px;
 float:left;   
 margin-top: 15px;
 margin-left: 15px;
 background-color: purple;
}
#green{
 width: 930px;
 height: 200px;
 background-color: green;  
 clear: both;
 margin-left: 15px;
}

#blue{
 width: 715px;
 float:left;
 height: 300px;
 margin: 15px;
 background-color: blue;
}

​</p>

于 2012-06-22T09:39:52.280 回答
0

使用 clearfix 并将类分配给您的容器是解决问题的方法之一。

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }
于 2012-06-22T09:30:20.780 回答
0 
<div id="container">
<div id="main">
<div id="main_left"></div>
<div id="main_right"></div>
</div>
<div id="last"></div>
</div>

css

#container
{
width:xx;
height:xx;
background:
}
#main
{
width:xx;
height:xx;
}
#main_left{
float:left;
width:xx;
height:xx;
}
#main_right
{
float:right
width:xx;
height:xx;
}
#last
{
clear:both;
width:xx;
height:xx;
}
于 2012-06-22T09:35:24.133 回答
0

演示http://jsfiddle.net/yTUU6/

HTML

<div id="contaner">
    <div id="top_left">
        left box
    </div>
    <div id="top_right">
        right box<br />
        height will be changed <br />
        <br /><br /> <br /><br />         <br /><br /> <br /><br />       <br /><br /> <br /><br />
    </div>
    <div class="clear"></div>
    <div id="bottom"></div>
</div>

CSS

#contaner{
    width: 100%;
    height: 400px;
    background: #EEEEEE;
}
#top_left{
    width: 30%;
    border:solid 1px;
    height: 200px;    
    float:left;
}
#top_right{
    width:69%;
    float:left;
    border:solid 1px red;
}
.clear{
    clear: both;
}
#bottom{
    height: 100px;
    border: solid 1px green;
}
于 2012-06-22T09:38:08.713 回答
-2

经典方式（我是如何学会的）在两者之间使用更清晰的元素

CSS

.clearer{
    clear:both;
}
#parent{
    width:500px;
    background-color:#343434;
    padding:10px;
    color:#fff;
}

#box{
    width:50px;
    height:50px;
    margin:10px;
    float:left;
    background-color:#545454;
}

#variable{
    width:400px;
    float:left;
}

#footer{
    height:40px;
    margin-top:30px;
    background-color:#646464;
}

HTML

<div id="parent">
    <div id="box"></div>
    <div id="variable">
    </div>
    <div class="clearer"></div>
    <div id="footer"></div>
</div>

这里有一个例子

希望这可以帮助

于 2012-06-22T09:39:23.960 回答