Question

在将三个div并排放置时遇到了问题。

这三个div包含普通文本，但底部也有一个链接。

<div id="parent">
    <h1>Description</h1>
    <div class="item">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
        <a href="#">Bottom</a>
    </div>
    <div class="item">
        <p>erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</p>
        <a href="#">Bottom</a>
    </div>
    <div class="item">
        <p>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
        <a href="#">Bottom</a>
    </div>
</div>

要获得此响应，项目为inline-block，宽度为32％。

div#parent {
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

div#parent div.item {
    display: inline-block;
    width: 32%;
    vertical-align: top;
}

现在的问题是，当我改变窗口大小时，项目的高度是不同的。我希望项目底部的链接位于同一位置，如下所示：
但实际看起来像这样：
我使用JavaScript将这些项目设置为相同的高度，但是如何将theese链接到相同的位置？我知道这可以通过将项目设置为position: relative;而将a设置为position: absolute; bottom: 0;来完成，但随后text-align: center;不再有效。

I made a JSFiddle for you to understand my problem.

希望你能帮助我。

Answer 1

Flex可以非常轻松地完成这项任务，但需要更少的浏览器支持。另一种方法是使用display: table，它有很好的支持（直到IE8），最后你会找到一个使用它的样本。

另一种方式，用“行”来思考，就像这样，没有绝对位置，没有脚本并且你的链接保持在底部，都集中在一起。

<强>更新

根据要求，为了提高响应速度，我添加了媒体查询。

在整页中运行代码段并调整浏览器大小以查看其运行情况。

需要注意的是，这仍然是“不使用flex”解决方案。

更新2

添加了display: table

#parent {
    text-align: center;
    width: 90%;
    margin: 0 auto;
}
#parent div.item {
    display: inline-block;
    width: 32%;
    vertical-align: top;
    position: relative;
}
#parent div.item ~ div.item {
    margin-left: 1%;
}

#parent .contents a {
    display: none;
}

@media (max-width: 500px) {
  #parent div.item {
    display: block;
    width: 100%;
  }
  #parent .contents a {
    display: inline;
  }
  #parent .links a {
    display: none;
  }
}

<div id="parent">
    <div class="wrapper contents">
        <h1>Description</h1>
        <div class="item">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
            <a href="#">Bottom</a>
        </div>
        <div class="item">
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea duo rebum. Stet clita kasd gubergren, no sea duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</p>
            <a href="#">Bottom</a>
        </div>
        <div class="item">
            <p>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
            <a href="#">Bottom</a>
        </div>
    </div>
    <div class="wrapper links">
        <div class="item">
            <a href="#">Bottom</a>
        </div>
        <div class="item">
            <a href="#">Bottom</a>
        </div>
        <div class="item">
            <a href="#">Bottom</a>
        </div>
    </div>
</div>

表格版本

#parent {
    display: table;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}
#parent div.item {
    display: table-cell;
    width: 32%;
    vertical-align: top;
    position: relative;
    padding-bottom: 20px;
}
#parent div.item ~ div.item {
    padding-left: 1%;
}
#parent div.item a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
}
@media (max-width: 500px) {
  #parent {
    display: block;
  }
  #parent div.item {
    display: block;
    width: 100%;
  }
}

<div id="parent">
    <div class="wrapper">
        <h1>Description</h1>
        <div class="item">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
            <a href="#">Bottom</a>
        </div>
        <div class="item">
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea duo rebum. Stet clita kasd gubergren, no sea duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</p>
            <a href="#">Bottom</a>
        </div>
        <div class="item">
            <p>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
            <a href="#">Bottom</a>
        </div>
    </div>
</div>

Answer 2

由于您要求解决方案没有 position: absolute; bottom: 0;，我会给您以下方法。

您可以做的是将内容容器包装到另一个div容器中，并在内容容器后面插入链接。你会得到一个像这样的伪结构：

<div class="content-wrapper">
    <div class="content">
        Text etc...
    </div>
    <a href="target...">Linktext</a>
</div>

每三个内容容器。使用javascript resizeFunction，链接始终处于相同的高度。

请注意，您的div.content-wrapper现在为display:inline-block;，但您的div.content不是。{/ p>

格尔茨

Answer 3

编辑2 ：由于您要求的解决方案没有var json = '{"products":[{"menuid":"9","name":"Cable Managementdsdsd","description":"fgfgfg","location":"CableTray.jpg"}]}'; var jsobject= JSON.parse(json); console.log(json); console.log(jsobject); for(var i = 0; i < jsobject.products.length; i++){ console.log(jsobject.products[i].menuid); console.log(jsobject.products[i].name); console.log(jsobject.products[i].description); console.log(jsobject.products[i].location); }，请转而使用this answer。

我的旧（有点无效）回答：

我更新了你的小提琴：https://jsfiddle.net/vgxocqw7/1/

新css：

position:relative/absolute

并将div#parent div.item { display:table-cell; width: 32%; vertical-align: top; position:relative; } div#parent div.item a.bottom{ position:absolute; bottom:0; }添加到您的链接

你可能需要做一些关于“底层”链接定位的工作，它们不是很中心

编辑：删除了JS

https://jsfiddle.net/vgxocqw7/5/

Answer 4

如果你使用javascript为div.item做出相同的高度，那么：

div#parent div.item {
    display: inline-block;
    width: 32%;
    vertical-align: top;
    position: relative;
    padding-bottom: 20px;
}

div#parent div.item a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
}

Answer 5

使用此代码，即使使用position:absolute，div也会在底部居中：

div#parent div.item {
    float: left;
    width: 32%;
    position: relative;
    min-height:160px;

}

a {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom:0;
}

这是example。

Answer 6

更新CSS，如下所示：

JSfiddle

div#parent div.item {
    display: table-cell;
    width: 32%;
    position: relative;
    padding-bottom: 20px;
    vertical-align: top;        
}

div#parent div.item a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
}

CSS并排div，底部有固定链接

6 个答案: