2個元素旁邊的圖像使用Flex

這是我用我下面的代碼獲得

我正在使用下面的代碼，這是對齊圖像，但它的應用項目對所有項目，所以其他h6也浮動..

.block { 
 
    display: flex; 
 
    align-items: center; 
 
}

<div class="block"> 
 
    <img src="/img/person.jpg" /> 
 
    <h5>Jordan Baker</h5> 
 
    <h6>Owner of Bavet</h6> 
 
</div>

我這麼想嗎？謝謝

來源

2017-09-25 Notflip

這是因爲你的Flex方向默認是行，所以所有的項目都會排成一列，你需要設置一個固定的高度並將其改爲帶有換行的列，或者改變你的html的結構 – Pete

這是一個使用你的html結構：https：//jsfiddle.net/nzsr16n4。我可能會用下面的答案去改變你的html結構，所以它會更靈活 – Pete

''標籤不需要或者使用結束斜線。 – Rob

你應該把你的標題在另一個包裝

<div class="block"> 
    <img src="/img/person.jpg" /> 
    <div class="wrapper"> 
    <h5>Jordan Baker</h5> 
    <h6>Owner of Bavet</h6> 
    </div> 
</div>

來源

2017-09-25 12:23:06

與您提供的標記，請嘗試以下

.block { 
 
    display: flex; 
 
    height: 100px; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    align-items: flex-start; 
 
    width: 300px; 
 
} 
 

 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
h5, h6 { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="block"> 
 
    <img src="/img/person.jpg" /> 
 
    <h5>Jordan Baker</h5> 
 
    <h6>Owner of Bavet</h6> 
 
</div>

用的height沿flex-direction和flex-wrap塊是有助於實現req的屬性通過對齊。

變化的h5，h6甚至.block您的要求margin，padding等屬性。

來源

2017-09-25 12:32:16

2個元素旁邊的圖像使用Flex

回答

相關問題