HTML - 圖像左邊的div

我試圖在上顯示image的left和另一個div，其上有right的一些文字。我使用：如下圖所示HTML - 圖像左邊的div

img { 
 
    float: left; 
 
} 
 

 
div.out { 
 
    background-color: blue; 
 
    padding: 10px; 
 
} 
 

 
div.in { 
 
    background-color: yellow; 
 
    padding: 5px; 
 
}

<div class="out"> 
 
    <img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png"> 
 
    <div class="in"> 
 
    Flowers<br>are<br>cool 
 
    </div> 
 
</div>

代碼工作幾乎正常，但我怎樣才能使第一藍色div延伸到的圖像的結束位置盡頭？另外，如何在圖像和文本之間添加10像素的空間？（還有，就是我加入float: left;到img最好的方式來顯示它左邊的路還是有更好的辦法？）非常感謝

來源

2017-08-11 darkchampionz

可以使用flexbox model此。拆下浮子和外層的div使用display: flex;，和內部的div flex-grow: 1;：

#flexbox_container { 
 
    display: flex; 
 
    background-color: blue; 
 
    padding: 10px; 
 
} 
 

 
div.flex_item { 
 
    background-color: yellow; 
 
    padding: 10px; 
 
    flex-grow: 1; 
 
}

<div id="flexbox_container"> 
 
    <img class="flex_item" src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png"> 
 
    <div class="flex_item item_selected"> 
 
    Flowers 
 
    <br>are 
 
    <br>cool</div> 
 
</div>

來源

2017-08-11 02:09:14 j08691

img { 
 
    display: inline-block; 
 
} 
 

 
div.out { 
 
    background-color: blue; 
 
    padding: 10px; 
 
    display: flex; 
 
} 
 

 
div.in { 
 
    display: inline-block; 
 
    width: 100%; 
 
    background-color: yellow; 
 
    padding: 5px; 
 
}

<div class="out"> 
 
    <img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png"> 
 
    <div class="in"> 
 
    Flowers<br>are<br>cool 
 
    </div> 
 
</div>

我建議你應該學習如何使用柔性

來源

2017-08-11 02:11:29 zynkn

img { 
 
    float: left; 
 
} 
 

 
div.out { 
 
    background-color: blue; 
 
    padding: 10px; 
 
} 
 

 
div.in { 
 
    background-color: yellow; 
 
    padding: 5px; 
 
} 
 

 
.clr { 
 
    clear: both; 
 
}

<div class="out"> 
 
    <img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png"> 
 
    <div class="in"> 
 
    Flowers<br>are<br>cool 
 
    </div> 
 
<div class="clr"></div> 
 
</div>

如果你正在尋找的藍盒子延伸到你的浮動內容結束後，你想找一個明確的定位。使用class clr添加div，查看上面的小改動。

- 編輯所有編輯 - 在完成你所問的內容之後意識到......它可能不是你想要問的。但是我得到了藍色方框延伸到圖像結束哈哈的地方。

來源

2017-08-11 02:15:20 Nicholas

不知道爲什麼你編輯你原來的答案是完全一樣的作爲上面的一個仍然有

，它沒有任何區別 – Mindless

我是新來的stackoverflow，沒有使用代碼片段之前。編輯它來修復它。 - 雙編輯，沒有意識到我第二次複製了錯誤的代碼！你說得對，第三次做正確的哈哈。 – Nicholas

你的原始答案是提供一個div class clr，它與你現在的答案有所不同，你編輯它是的，但即使你現在刪除class clr，它也沒有任何區別。「如果你是尋找藍色方框以延伸到浮動內容的末尾，尋找明確的解決方法。請參閱上面的小改動，並添加帶類clr的div。「 – Mindless

display:flex不支持IE9和更早，所以我用的另一種方式：

.out { 
 
    background-color: blue; 
 
    padding: 15px; 
 
} 
 

 
.content { 
 
    background-color: yellow; 
 
} 
 

 
.content:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
.in { 
 
    padding-top: 5px; 
 
} 
 

 
img { 
 
    float: left; 
 
    margin-right: 5px; 
 
}

<div class="out"> 
 
    <div class="content"> 
 
     <img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png"> 
 
     <div class="in">Flowers<br>are<br>cool</div> 
 
    </div> 
 
</div>

來源

2017-08-11 02:33:35 Ehsan

HTML - 圖像左邊的div

回答

相關問題