我得到了以下用例:
你可以看到三个相同的盒子: 每个盒子都以一个大的矩形框开始,它有一个图片和可变的内容,因此具有可变的高度。 其余部分由一个列表组成,它是垂直对齐的底部,因此它们应该达到相同的高度。
我的目标是“同步”< li>在每个方框中。因此,在这样的<中输入多少文本并不重要。 li>标签,设计应该自动处理分词并将内容对齐,就像它是一行一样。
换句话说,就像Abhitalks所说,我想根据相互高度将列表项与其他内容列中的同行对齐。
现在,我使用display flex来将列表垂直对齐到元素的底部。 你可以在这里找到我用过的解决方案 Vertical alignment of floating divs
但现在我遇到了问题,如果列表中没有相同的内容(e.x。每个列表项目超过两行,整个事情就会转移到顶部。
但是,是否有可能使用flexbox模拟行行为,但实际上是否具有列结构?
我需要一个列结构,因此我可以轻松获得响应式布局。
希望您了解我的问题
提前感谢!
更新:
这是小提琴: http://jsfiddle.net/a1yr4u84/3/
你可以看到,我做了< br />在li的内容中,以使内容适合。
<li>one <br /> two</li>
<li>one <br /> two <br /> three</li>
<li>one<br /><br /></li>
然而,我无法控制李的文本数量。而且我不希望用户使用&lt; br /&gt; s但让设计处理内容,所以我希望列内的列表行为像行
答案 0 :(得分:4)
......三个相同的盒子:第一个大矩形部分有 可变内容,因此可变高度。其余的由一个 列表,这是垂直对齐的底部,以便他们应该得到 相同的高度。
您需要嵌套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的评论)
如果您希望list-items与其他内容列中的对等项对齐,具体取决于相互高度,那么您无法使用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
来循环遍历列表项。在生产代码中,您必须计算最大列表中的列表项数。
答案 1 :(得分:0)
将css [x,~,~,~,~] = pcg(A,b,tol,maxit);
设置为行对象。所有都需要设置相同的高度。