將兩個div對齊到較高的一個底部

上面是我想要完成的模型。

我有兩個不同的div行需要對齊行的底部，我在每個div的底部有一個強大的灰色規則。這些灰色規則應該水平對齊。

最大的問題是，由於這是一個WordPress主題，因此每個div都需要能夠根據內容的數量進行垂直擴展和收縮。這意味着如果左側的.description變得更高，則需要調整.page-title和.sidebar以確保灰色規則對齊。這可以防止我使用任何固定的高度，我可以找出一個系統。

我的第一溶液使用的絕對和相對定位的組合：使用兩個div容器，.row-1和.row-2，都與position: relative，並添加position: absolute; bottom: 0;。這似乎沒有工作，但沒有分配一個固定的高度，每個.row-股利，無論我使用浮動或左：0; /右：0;定位各個divs。

我能想到的唯一的其他解決方案是使用JavaScript獲得最高div的高度並適當調整邊距，但我不願意使用JavaScript作爲樣式。有沒有更好的解決方案，我錯過了？

來源

2012-01-09 daysrunaway

我很高興你避免使用表格，「如果使用表格進行佈局，他/她不應該稱他/她爲設計師」 – ajax333221 2012-01-09 21:38:22

感謝ajax333221，我想如果我找不到CSS方式完成這個雖然我可能不得不訴諸表... – daysrunaway 2012-01-10 04:49:18

總是有一種方式來佈局沒有邪惡的表。 – ajax333221 2012-01-10 16:26:30

-2

爲什麼不嘗試使用CSS框架，他們很容易定製，而且它們非常易於使用。嘗試960.gs或blueprintcss.org。還有許多其他版本的960框架可用。

我個人建議960，因爲它比其他人簡單。

<div class="grid_7 prefix_1"> 
    <div class="grid_2 alpha"> 
     ... 
    </div> 
    <div class="grid_3"> 
     ... 
    </div> 
    <div class="grid_2 omega"> 
     ... 
    </div> 
</div> 
<div class="grid_3 suffix_1"> 
    ... 
</div>

這是一個固定寬度的4列。

來源

2012-01-09 20:49:40 vij

如果有人認爲我的回答沒有用，他們可以發表評論。所以我可以改善！ – vij 2012-01-21 12:26:19

我認爲你的答案沒有用，因爲你沒有提供這個問題的明確答案。如果您知道用這些框架之一設計所需結果的方法，請開發。 – 2012-02-10 14:08:57

thanx @Artimuz我會做到這一點 – vij 2012-02-10 18:23:00

如果您需要.description DIV是固定大小的，但也需要它是動態的內容的金額，然後使用CSS屬性overflow:scroll或overflow:auto這樣它會給出一個滾動條來顯示額外的內容不改變div的大小。

同樣對於側欄，給它一個float:right並將它放在第2行div之前，這會將它放在右側。第2行div和內容div都會出現在左側，只要它沿着垂直方向延伸，或者它們具有固定的寬度。

來源

2012-02-09 22:06:08 Ryan

這是一個常見的CSS問題，並沒有完美的解決方案。

我所知道的最好的是你談論的那個：讓容器'位置：親戚'和兒童position: absolute; top:0; bottom:0;。

事實上，如果兒童漂浮，他們是流出，你需要clearfix使你的容器有正確的高度。

來源

2012-02-11 03:54:11

將兩個div對齊到較高的一個底部

回答

相關問題