Question

我实际上有一个3列布局。这些列中的3列放在一个分区内。我使用float来对齐这些列。

    #col1 {
    float: left;
    width: 15%;
    background: #93A5C4;
    padding-bottom: 10px;
    min-height:450px;
}
#col2 {
    padding: 10px 0;
    width: 70%;
    float: left;
    min-height:450px;
    position:relative;
}
#col3 {
    float: left;
    width: 15%;
    background: #93A5C4;
    padding: 10px 0;
    min-height:450px;
}`

当这些列扩展时，容纳这些列的容器也应该扩展..所以我该怎么办？它应该像我使用position：relative这些列一样扩展！

Answer 1

块元素扩展到其CONTAINERS的大小。百分比宽度指的是包含元素的宽度。

Answer 2

您也可以使用包装div的百分比。

并保留列上的值，因为它们将获得包装div的％。

示例：

<强> HTML：

<div id="wrapper">
  <div id"col_1">
  </div>
  <div id"col_2">
  </div>
  <div id"col_3">
  </div>
</div>

和CSS：

#wrapper{
  width:90%;
}
#col_1{
  width:15%;
  float:left;
}
#col_2{
  width:70%;
  float:left;
}
#col_3{
  width:15%;
  float:left;
}

Answer 3

在关闭包装div之前必须清除浮点数

 <div class="clear"></div>

 //the css
 .clear{clear:both;}

并确保没有将“height”设置为包装器div

CSS对齐问题

3 个答案: