问题与CSS对齐

我实际上有一个3列布局。其中3列放置在一个部门内。我用float来对齐这些列。问题与CSS对齐

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

当这些列扩大，集装箱持有这些也应该扩大..所以我该怎么办？它应该像我使用的位置展开：这些列的相对位置！

来源

2012-03-23 Kiran Vemuri

需要看到更多的代码，在HTML的实例。要回答如下问题：是列内联还是块内容？而且他们如何横向或纵向扩展？现在发生了什么，你想要发生什么？你有没有在任何地方使用'clear'？ – 2012-03-23 14:05:49

你也可以添加html代码吗？ – vivek 2012-03-23 14:08:58

你还可以发布容器的CSS代码吗？如果你的容器有宽度：N％将扩展到N，并且容器内部的各个div将根据你的指令进行调整。 – TheHube 2012-03-23 14:09:00

你也可以使用百分比来包装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; 
}

来源

2012-03-23 14:10:13 justanotherhobbyist

我已经设置宽度属性好友.. 和谢谢..是啊..必须设置高度为100％ :)谢谢:) – 2012-03-23 14:17:13

，实际上没有锻炼.. – 2012-03-23 14:26:46

然后，你有你的代码中的东西搞乱向上。你可以让小提琴再现这个问题吗？根据我们所掌握的信息，我们找不到问题。 – justanotherhobbyist 2012-03-23 14:29:57

块元素扩展到它们的容器的大小。百分比宽度指的是包含元素的宽度。

来源

2012-03-23 14:11:47

你有你关闭包装DIV

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

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

之前清除浮动，并确保你没有“高度”设置为包装DIV

来源

2012-03-23 14:19:14

不！不工作！容器实际上缩小以适应其余元素，并将这些元素留在容器外部！ – 2012-03-23 14:29:25

删除“位置”属性 – 2012-03-23 14:40:14

问题与CSS对齐

回答

相关问题