如何在图像旁边添加 div？答案

【问题标题】：How To Add A Div Next To An Image?如何在图像旁边添加 div？
【发布时间】：2017-05-08 01:03:41
【问题描述】：

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

【问题讨论】：

比这更具体！添加到目前为止您所做的代码。

标签： html css

【解决方案1】：

您可以在 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>

【讨论】：

你的回答很好，但我建议width:calc((100% - 50px) / 2); 让侧面 div 具有相同的宽度（例如：jsfiddle.net/Lphf2hwz/1）-50px 是演示中图像的宽度
@AlonEitan 哇，我从来不知道 CSS 可以做到这一点。我已经用你的替换了小提琴链接。谢谢！ :)

【解决方案2】：

将图片放入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>

【讨论】：

【解决方案3】：

您的要求应该从下面这张图片开始的地方开始。你可以修改它以获得你需要的布局

<!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>

【讨论】：

这不是响应式的，维护起来是一场噩梦，你不会在任何地方清除浮动并使用静态高度样式修复它。使用 flex 的另一个答案是正确的（但仍需要改进）