設置與另一個div內嵌的div內的內容對齊

Question

我有一個頁面，兩個div並排排列在三分之一到三分之二的位置。這些包含在一個父div中。我的一個div有一個圖像，我想要做的是有能力將圖像垂直對齊到父div的頂部，中間或底部，其高度由第二個div中的文本數量定義。理想情況下，我希望能夠爲圖片或內容添加一個類，這將設置對齊方式。

https://jsfiddle.net/y9mLr5xv/1/

<style type="text/css"> 
    section { 
    padding: 40px 0 40px; 
    display: block; 
    box-sizing: border-box; 
    font-size: 16px; 
    line-height: 1.5; 
    font-family: sans-serif; 
    } 

    .inner { 
    width: 95%; 
    max-width: 1040px; 
    margin-left: auto; 
    margin-right: auto; 
    } 

    .section-body { 
    width: 100%; 
    float: left; 
    margin: 0; 
    } 

    .content-a { 
    width: 32.7%; 
    float: left; 
    } 

    .content-b { 
    width: 62.1%; 
    float: left; 
    margin-left: 4.2%; 
    } 

    h3 { 
    margin: 0; 
    } 
</style> 

<section class="main"> 
    <div class="inner"> 
    <div class="section-header"> 
     <div class="content"> 
     <h1> 
      Header here 
     </h1> 
     <p class="strap"> 
      Strapline would go here 
     </p> 
     </div> 
    </div> 
    <div class="section-body"> 
    <div class="content-a"> 
    <img src="http://placehold.it/350x150"> 
    </div> 
    <div class="content-b"> 
    <h3> 
     Title here 
    </h3> 
    <p> 
     A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. 
    </p> 
    <ul> 
     <li>List item</li> 
     <li>List item</li> 
     <li>List item</li> 
     <li>List item</li> 
     <li>List item</li> 
    </ul> 
    <p> 
     A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. 
    </p> 
    </div> 
</div> 
    </div> 
</section> 

Answer 1

試試這個，它可以幫助你實現你的目標

.content-a img { 
    width: 45%; 
    float: left; 
} 

.content-b { 
    width: 45%; 
    float: right; 
// margin-left: 4.2%; 
} 

Answer 2

也許你可以使用display: table-cell

http://jsfiddle.net/440d1f96/

與HTML：

<div class="area vertical-top"> 
    <img src="http://lorempixel.com/300/150/cats"> 
</div> 

<div class="area"> 
    <p>lorem ipsum...</p> 
</div> 

和CSS：

.area { 
    background: red; 
    display:table-cell; 
    vertical-align: top; 
} 

.vertical-bottom { 
     vertical-align: bottom; 
} 

.vertical-middle { 
     vertical-align: middle; 
} 

Answer 3

實測值使用溶液display: flex

https://jsfiddle.net/johnthomson92/y9mLr5xv/2/

HTML：

<section class="main"> 
    <div class="inner"> 
    <div class="section-header"> 
     <div class="content"> 
     <h1> 
      Header here 
     </h1> 
     <p class="strap"> 
      Strapline would go here 
     </p> 
     </div> 
    </div> 
    <div class="section-body"> 
     <div class="content-a top"> 
     <img src="http://placehold.it/350x150"> 
     </div> 
     <div class="content-b"> 
     <h3> 
      Title here 
     </h3> 
     <p> 
      A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. 
     </p> 
     <ul> 
      <li>List item</li> 
      <li>List item</li> 
      <li>List item</li> 
      <li>List item</li> 
      <li>List item</li> 
     </ul> 
     <p> 
      A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. 
     </p> 
     </div> 
    </div> 
    </div> 
</section> 

CSS：

section { 
    padding: 40px 0 40px; 
    display: block; 
    box-sizing: border-box; 
    font-size: 16px; 
    line-height: 1.5; 
    font-family: sans-serif; 
    overflow: hidden; 
} 

.inner { 
    width: 95%; 
    max-width: 1040px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.section-body { 
    width: 100%; 
    float: left; 
    margin: 0; 
    display: flex; 
    position: relative; 
} 

.strap { 
    margin-bottom: 20px; 
} 

.content-a { 
    width: 32.7%; 
    float: left; 
    display: flex; 
    align-items: flex-start; 
} 

.top { 
    align-items: flex-start; 
} 

.middle { 
    align-items: center; 
} 

.bottom { 
    align-items: flex-end; 
} 

.content-b { 
    width: 62.1%; 
    float: left; 
    margin-left: 4.2%; 
} 

p { 
    margin-bottom: 0; 
} 

h3 { 
    margin: 0; 
} 

img { 
    max-width: 100%; 
    display: block; 
}