使用div为内容创建容器

Question

我正在构建一个小页面，我有一个div内容包装器，在其中我有几个包含实际内容的div。只是出于某种原因，我想要保留文本的div不是持有它。最终我试图在照片和文本之间添加一点空间。注意文本的第一行如何与图像间隔开，但其余部分与图像相邻。这是代码：

#content_wrap {
  width: 700px;
  margin: 0px;
  padding: 50px 0px 0px;
}
#content_photo {
  vertical-align: top;
  margin: 0px;
  padding: 0px;
  display: inline;
  position: relative;
}
#content_desc {
  vertical-align: top;
  margin: 0px;
  padding: 0px 0px 0px 100px;
  display: inline;
  position: relative;
}
#aphoto {
  width: 150px;
  height: auto;
}

<div id="content_wrap">
  <div id="content_photo">
    <img id="aphoto" src="//placehold.it/100?text=Image" align="left">
  </div>
  <div id="content_desc">A whole bunch of random text. A whole bunch of random text. A whole bunch of random text. A whole bunch of random text. A whole bunch of random text.</div>
</div>

Answer 1

要将空间添加到右侧，我使用float和margin：

#content_wrap {
  width: 700px;
  margin: 0px;
  padding: 50px 0px 0px;
}
#content_photo {
  vertical-align: top;
  margin: 0px;
  padding: 0px;
  display: inline;
  position: relative;
  float: left;
}
#content_desc {
  vertical-align: top;
  margin: 0px 0px 0px 10px;
  float: left;
  display: block;
  position: relative;
  width: 535px;
}
#aphoto {
  width: 150px;
  height: auto;
}

<div id="content_wrap">
  <div id="content_photo">
    <img id="aphoto" src="//placehold.it/100?text=Image" />
  </div>
  <div id="content_desc">A whole bunch of random text. A whole bunch of random text. A whole bunch of random text. A whole bunch of random text. A whole bunch of random text.</div>
</div>

上面的代码给了我这样的东西：

Answer 2

问题在于您使用html, body { margin: 0; height: 100%; min-height: 100%; } 代替display: inline;。要将元素转换为块，意味着您必须手动指定容器的宽度，否则块将占据父级宽度的100％，从而将元素放在自己的行上。

以下是一个例子： https://jsfiddle.net/q4d2rjjf/1/

Answer 3

你也可以将flex应用于包装div

＆＃13;

＆＃13;

#content_wrap {
  width: 700px;
  margin: 0px;
  padding: 50px 0px 0px;
  display: flex;
}
#content_photo {
  vertical-align: top;
  margin: 0px;
  padding: 0px;
  position: relative;
}
#content_desc {
  vertical-align: top;
  margin: 0px;
  padding: 0px 0px 0px 100px;
  position: relative;
}
#aphoto {
  width: 150px;
  height: auto;
}

＆＃13;

<div id="content_wrap">
  <div id="content_photo">
    <img id="aphoto" src="//placehold.it/100?text=Image" align="left">
  </div>
  <div id="content_desc">A whole bunch of random text. A whole bunch of random text. A whole bunch of random text. A whole bunch of random text. A whole bunch of random text.</div>
</div>

＆＃13;

＆＃13;

＆＃13;