如何在图像旁添加一个Div？

-5

我想在图像两边添加div。我试图在两侧制作两个黄色的水平矩形div。

2017-05-07 ZL3909

比这更具体的！添加迄今为止完成的代码。 –

-1

您的要求应该从下面显示的图像开始。您可以鼓捣与它周围获得的布局，你需要

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
</head> 
<body> 
<style type="text/css"> 
#container{width:100%;height:100%; background-color: white;} 
#left{float:left;width:100px;height:100px;background-color: yellow;} 
#right{float:right;width:100px;height:100px;background-color: orange;} 
#center{margin:0 auto;width:100px;height:100px;background-color: violet;} 
</style> 
<div id="container"> 
<div id="left">Your Left Div</div> 
<div id="right">Your Right Div</div> 
<div id="center">Image Goes Here</div> 
</div> 
</body> 
</html>

来源

2017-05-07 16:23:58

这是没有响应和维护的恶梦，你不清除任何地方漂浮，并使用静态高度风格修复它。另一个答案，与flex是正确的（但仍需要改进） –

您可以使用CSS盒子flex。请在此处阅读：FLEX-BOX
小提琴在这里：fiddle谢谢Alon Eitan宝贵的建议！

因此，请将您的整个div与父母div封装在一起，然后您可以在高度和宽度上玩耍。
所以，你的结构将是这样的：

<div id="mainDiv"> 
    <div id="div1"> 

    </div> 
    <div id="img1"> 
     <img id="image" src="http://i.imgur.com/HKwhBJp.png"/> 
    </div> 
    <div id="div2"> 

    </div> 

</div>

来源

2017-05-07 16:25:22

你的答案是好的，但我建议'宽度：钙（（100％ - 50px）/ 2）;'侧边divs使他们相同宽度（例如：https：//jsfiddle.net/Lphf2hwz/1/） - '50px'是你演示图像的宽度 –

@AlonEitan哇，我从来不知道CSS可以做到这一点。我已经用你的小提琴取代了小提琴。谢谢！ :) –

放在一个div图像，并使用伪元素

body { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: rgb(141, 0, 0); 
 
    margin: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.image-container { 
 
    width: 100vw; 
 
    height: 50vh; 
 
    background: red; 
 
    display: flex; 
 
} 
 

 
.image-container:before, 
 
.image-container:after { 
 
    content: ""; 
 
    display: block; 
 
    width: 25%; 
 
    height: 100%; 
 
    background: yellow; 
 
} 
 

 
.image { 
 
    width: 50%; 
 
    height: 100%; 
 
}

<div class="image-container"> 
 
    <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/4/4f/World_topic_image_Satellite_image.jpg"> 
 
</div>

来源

2017-05-07 17:03:41

如何在图像旁添加一个Div？

回答

相关问题