列中的文本和图像 - 对齐图像

图像尺寸可能是50到400px，文本从1线2段

+---+ 
| | +---+ 
| | | | 
+---+ +---+ 
text text 
text text 
text 
text

是否可以使用Flex对准有关的图像，而无需使用JS的底部？

* { box-sizing: border-box; } 
 

 
body { line-height: 1.5; } 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap row; 
 
    max-width: 60rem; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.col { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-grow: 1; 
 
    flex-shrink: 1; 
 
    flex-basis: 33.33333%; 
 
    padding-right: .5rem; 
 
    padding-left: .5rem; 
 
} 
 

 
.col-img { 
 
    display: flex; 
 
    flex: 1 0 auto; 
 
    overflow: hidden; 
 
    align-items: flex-end; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.col-content { 
 
    flex: 1 0 auto; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="col-img"> 
 
     <img src="//placehold.it/600x200"> 
 
    </div> 
 
    <div class="col-content"> 
 
     <h1>Title</h1> 
 
     <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="col-img"> 
 
     <img src="//placehold.it/600x300"> 
 
    </div> 
 
    <div class="col-content"> 
 
     <h1>Title</h1> 
 
     <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p> 
 
    </div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="col-img"> 
 
     <img src="//placehold.it/600x400"> 
 
    </div> 
 
    <div class="col-content"> 
 
     <h1>Title</h1> 
 
     <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p> 
 
     <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p> 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/87j37r81/

来源

2017-07-07 Mark Barrett

让我们了解您到目前为止...... –

一个简单的例子可能是有益的尝试。比如，你有什么标记？您可以将其作为堆栈片段提供。 – domsson

寻求代码帮助的问题必须包含**最短代码**以在问题本身**中再现问题**，最好在[Stack Snippet]（https://stackoverflow.blog/2014/09/16/引入可运行的JavaScript-CSS-和HTML的代码段/）。请参见[如何创建最小，完整和可验证的示例]（https://stackoverflow.com/help/mcve）。 – LGSon

对于工作，你需要删除col规则/标记和使用order属性将它们分组。

而且它不会与col元素工作的原因是因为那么row的不能看到对方，将无法对齐垂直。 ^{_{（除非你给col-img固定高度，但我以为你不希望出现这种情况）}}

也就是说，连同align-items: flex-end，会给预期的结果。

flex-basis将使它们具有相同的宽度和折线，并且您使用order首先放置图像。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    line-height: 1.5; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    max-width: 60rem; 
 
} 
 

 
.col-img { 
 
    flex-basis: calc(33.33% - 20px); 
 
    margin: 10px; 
 
    display: flex; 
 
    overflow: hidden; 
 
    align-items: flex-end; 
 
    order: -1; 
 
} 
 

 
.col-img img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.col-content { 
 
    flex-basis: calc(33.33% - 20px); 
 
    margin: 10px; 
 
}

<div class="row"> 
 
    <div class="col-img"> 
 
    <img src="//placehold.it/600x200"> 
 
    </div> 
 
    <div class="col-content"> 
 
    <h1>Title</h1> 
 
    <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p> 
 
    </div> 
 

 
    <div class="col-img"> 
 
    <img src="//placehold.it/600x300"> 
 
    </div> 
 
    <div class="col-content"> 
 
    <h1>Title</h1> 
 
    <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p> 
 
    </div> 
 

 
    <div class="col-img"> 
 
    <img src="//placehold.it/600x400"> 
 
    </div> 
 
    <div class="col-content"> 
 
    <h1>Title</h1> 
 
    <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p> 
 
    <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p> 
 
    </div> 
 
</div>

来源

2017-07-07 10:27:41 LGSon

就像一个魅力作为一个例子工作（不知道秩序：-1），但我会选择不去简单地删除'col'结构使其工作，而是解释为什么给定的结构不起作用（或让它按照给定的方式工作），而你的解决方案实际上是“更清洁”的。（困惑？欢迎来到我的大脑！） –

@ RenevanderLende谢谢...添加了一个原因，它无法用现有标记解决 – LGSon

-1

试试这个？ Flexbox Guide

div#imageContainer { 
    height: 160px; 
    align-items: flex-end; 
    display: flex; 
    flex-direction: column; 
}

来源

2017-07-07 10:16:38 Zabusy

虽然这可能会回答这个问题，但发布一个代码，一个链接和一个文字说这个_Try this？_是一个非常糟糕的答案。 – LGSon

列中的文本和图像 - 对齐图像

回答

相关问题