在單獨的浮動div中垂直對齊P元素

Question

我有3個浮動div，其中3個都有兩個孩子p帶有文本的元素（一個帶描述，一個帶url）。

描述可以是任意長度，因此必須是動態的。鏈接在它們下面。我想將鏈接垂直對齊，所以他們的「y位置」基本相同。我無法做到這一點，就好像其中一個描述比其他描述更長（佔用更多行），其鏈接當然低於其他div的鏈接。我不能肯定我是否讓自己清楚，但這裏是代碼和jsfiddle，應該是顯而易見的是：

HTML：

<div id="container"> 
    <div class="floated"> 
     <p class="desc">This is some description</p> 
     <p class="link">This is a link</p> 
    </div> 
    <div class="floated"> 
     <p class="desc">This is some description that is really long, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p> 
     <p class="link">This is a link</p> 
    </div> 
    <div class="floated"> 
     <p class="desc">This is some description which is just long enough not to fit to one line.</p> 
     <p class="link">This is a link that is longer than the other ones and does not fit onto one line</p> 
    </div> 
</div> 

CSS：

#container { 
    width: 900px; 
    position: relative; 
    margin: 0 auto; 
    overflow: hidden; /* So all the floated elements have the same height */ 
} 
.floated { 
    width: 300px; 
    float: left; 
    padding-bottom: 500px; /* So all the floated elements have the same height */ 
    margin-bottom: -500px; /* So all the floated elements have the same height */ 
} 
.desc { 
    margin-bottom: 15px; 
    text-align: justify; 
    -moz-text-align-last: center; 
    text-align-last: center; 
} 

.link { 
    color: #e31500; 
    text-align: center; 
    text-decoration: underline; 
    font-size: 12px; 
    font-weight: bold; 
} 

正如你可以看到所有的鏈接都有不同的垂直位置。我希望能夠實現所有這些都與最低版本（在本例中爲第2列）具有相同的位置。甚至有可能不更改HTML？非常感謝！

Answer 1

不改變你的HTML標記... 去它使用display:table和display:table-cell爲

DEMO

#container { 
    width: 900px; 
    margin: 0 auto; 
    overflow: hidden; 
    display:table;  /* tada! */ 
    position:relative; 
    background:#eee; 
} 
.floated { 
    position:relative; 
    display:table-cell; /* tada! */ 
    width: 300px; 
    padding-bottom:45px; /* note this */ 
    text-align: justify; 
    -moz-text-align-last: center; 
    text-align-last: center; 
    background:#ddd; 
} 
.desc{ } 
.link{ 
    position:absolute; 
    display:block; 
    bottom:0px; 
    width:33%;   /* this */ 
    height:45px;   /* and this */ 
    color: #e31500; 
    text-decoration: underline; 
    font-size: 12px; 
    font-weight: bold; 
} 

唯一不好的是，你必須設置一些高度對於.link，否則你應該完全修改你的HTML，最簡單的方法是使用table結構。

Answer 2

如果您不想更改標記，則可以添加以下css代碼行，這是不可接受的，因爲內容可能會有所不同。

.desc{ 
    height:100px;  
} 

現在如果你想改變你的加價

下面是HTML標記。

<div id="container"> 
<div class="floated"> 
    <p class="desc">This is some description</p> 
</div> 
<div class="floated"> 
    <p class="desc">This is some description that is really long, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p> 
</div> 
<div class="floated"> 
    <p class="desc">This is some description which is just long enough not to fit to one line.</p> 
</div> 
<div class="floated links"> 
    <p class="link">This is a link</p> 
</div> 
<div class="floated"> 
    <p class="link">This is a link</p> 
</div> 
<div class="floated"> 
    <p class="link">This is a link that is longer than the other ones and does not fit onto one line</p> 
</div> 

與您的代碼一起添加以下CSS。 。鏈接{ 明確：兩者; float：left; }