Question

我有3个浮动的div，其中3个有两个子 p 元素和文本（一个带描述，一个带网址）。

描述可以是任何长度，因此必须是动态的。链接在他们下面。我想将链接彼此垂直对齐，这样它们的“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与您的代码一起添加。。链接{ 明确：两者; 向左飘浮; }

在单独的浮动div中垂直对齐P元素

2 个答案: