HTML5/CSS 根据其他列相互高度对齐列表项

Posted 2023-03-05

【中文标题】HTML5/CSS 根据其他列相互高度对齐列表项

【英文标题】：HTML5/CSS align list-items depending on other columns mutual height

【发布时间】：2015-12-11 16:47:01

【问题描述】：

我得到了以下用例：

您可以看到三个相同的框： 每个盒子都以一个大的矩形盒子开始，它有一张图片和可变的内容，因此具有可变的高度。 其余部分由一个列表组成，即底部垂直对齐，因此它们应该具有相同的高度。

我的目标是“同步”每个框中 的高度。所以在这样的

标签中输入多少文本并不重要，设计应该自动处理分词并像一行一样对齐内容。

换句话说，就像 Abhitalks 所说，我想根据相互高度将列表项与其他内容列中的对等项对齐。

现在，我使用 display flex 将列表垂直对齐到元素的底部。 你可以在这里找到我使用的解决方案： Vertical alignment of floating divs

但现在我遇到了问题，如果列表没有相同的内容（例如，每个列表项超过两行，整个事情就会转移到顶部。

但是，是否有可能使用 flexbox 模拟行行为，但实际上具有列结构？

我需要一个列结构，这样我就可以轻松获得响应式布局。

希望你能理解我的问题

提前致谢！

更新：

这是小提琴： http://jsfiddle.net/a1yr4u84/3/

你可以看到，我在li的内容里面做了的，为了让内容适合。

<li>one <br /> two</li>
<li>one <br /> two <br /> three</li>
<li>one<br /><br /></li>

但是，我无法控制 li 中的文本数量。而且我不希望用户使用 s 来破解，而是让设计处理内容，所以我希望列内的列表表现得像一行

【问题讨论】：

你想占据父容器的整个高度，尽管对齐是在行中。我对吗？ :)

不，我在父容器中有完整的高度。尽管我使用列布局，但我想保持每一行的高度相同。

你能通过代码详细说明你的问题吗？

【参考方案1】：

...三个相同的盒子：第一个大矩形部分有 可变的内容，因此可变的高度。其余的包括一个 列表，即垂直对齐的底部，因此他们应该得到 相同的高度。

你需要在这里嵌套flex。鉴于此标记：

<div class="wrap">
  <div class="col left">
    <img src="..." />
    <div class="content">
        <p>...</p>
    </div>
  </div>
  <div class="col middle">
      <img src="" />
    <ul class="content">
        <li>...</li>
        <li>...</li>
    </ul>
  </div>
  <div class="col right">
      <img src="..." />
    <ul class="content">
        <li>...</li>
    </ul>
  </div>
</div>

首先 flex 包装器将列排列成一行，并为列提供 flex-basis 或 33%（近似值），以允许第一列中的可变内容留出空间。：

.wrap  display: flex; 
.wrap .col  flex: 1 0 33%; 

接下来，flex 列以在列中布局图像和内容列表。这次不需要flex-basis：

.wrap .col  flex: 1 0 33%; display: flex; flex-direction: column; 
.col img, .col .content  flex: 0 0 auto; 

为了保持列表垂直对齐底部，只需为列表内容提供margin-top:auto：

.col .content  margin-top: auto; 

这是一个完整的例子..

小提琴：http://jsfiddle.net/abhitalks/a1yr4u84/1/

片段：

*  box-sizing: border-box; 
.wrap 
  width: 80%; margin: 16px auto; padding: 12px; border: 1px solid grey;
  display: flex;

.wrap .col 
    flex: 1 0 33%; display: flex; flex-direction: column;

.col img, .col .content  flex: 0 0 auto; 
.col img  width: 128px; display: block; margin: 2px auto; 
.col .content  margin: auto 12px 0px 12px; 

<div class="wrap">
  <div class="col left">
    <img src="//lorempixel.com/128/128" />
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
    </div>
  </div>
  <div class="col middle">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one</li>
        <li>one</li>
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
  <div class="col right">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
</div>

---

编辑：

（基于 op 的评论）

如果您希望列表项根据相互高度与其他内容列中的对等项对齐，则无法使用 CSS 执行此操作。我看到你已经用jQuery 标记了这个问题，所以我提出了一个使用jQuery 的快速而肮脏的解决方案。

计算列表项的height，并将该高度应用于其他列中的所有对应项：

小提琴 2：http://jsfiddle.net/abhitalks/a1yr4u84/4/

片段 2：

var $lists = $('ul.content');

for (i=0; i < 10; i++) 
    var highest = 0;
    $lists.each(function(idx, elem) 
        var h = $(elem).children().eq(i).outerHeight();
        if (h > highest) highest = h;
    );
    $lists.each(function(idx, elem) 
        $(elem).children().eq(i).outerHeight(highest);
    );    

*  box-sizing: border-box; 
.wrap 
  width: 80%; margin: 16px auto; padding: 12px; border: 1px solid grey;
  display: flex;

.wrap .col 
    flex: 1 0 33%; display: flex; flex-direction: column;

.col img, .col .content  flex: 0 0 auto; 
.col img  width: 128px; display: block; margin: 2px auto; 
.col .content  margin: 0px 12px 0px 12px; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="col left">
    <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one <br /> two</li>
        <li>one <br /> two <br /> three</li>
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
  <div class="col middle">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one</li>
        <li>one</li>
        <li>one</li>
        <li>one</li>
    </ul>
  </div>
  <div class="col right">
      <img src="//lorempixel.com/128/128" />
    <ul class="content">
        <li>one <br /> two</li>
        <li>one</li>
    </ul>
  </div>
</div>

注意：我使用了任意数量的 10 来循环遍历列表项。在生产代码中，您必须计算最大列表中列表项的数量。

【讨论】：

谢谢，这接近解决方案，但是：我需要从同一行开始的列表，尽管它们在同一列中：请参阅jsfiddle.net/a1yr4u84/2 一二三跨越三行。我希望中间和右列也从一个开始的地方开始，下一个项目应该在三个之后，独立于里面有多少内容。

@KyuuSung：这在 css 中是不可能的。您将不得不使用 javascript。我已经更新了答案以包含一个可能的解决方案。就目前而言，您的问题及其标题对于您的问题非常模棱两可。请更新问题，清理并使其更清晰。

嘿，我刚刚尝试了你的 jquery 代码并得到了最后一个问题；您说：“注意：我使用了任意数量的 10 来循环遍历列表项。在生产代码中，您必须计算最大列表中列表项的数量。”。我不明白的是，为什么你不使用 idx （每次迭代的索引），而是在这个例子中只迭代 10 个项目？！

好吧，对不起，我没有意识到其他的.每个迭代都需要当前索引来设置最大值。

@KyuuSung：很抱歉造成混乱。实际上idx 根本没有被使用。只有外部for 循环中的i。包含 idx 和 elem 参数只是出于我的习惯。

【参考方案2】：

将 css line-height 设置为行对象。都需要设置相同的高度。

【讨论】：

line-height 会随着内容的变化而变化，对吧？

看什么内容。如果您在文本中使用image 和随机height，则不会。如果您不使用图像或仅使用具有预定义高度的图像，那么应该没问题。