問題與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對齊

回答

相關問題