列中的文本和圖像 - 對齊圖像

圖像尺寸可能是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

列中的文本和圖像 - 對齊圖像

回答

相關問題