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

回答

相关问题