文本拥抱太靠近图像引导

Question

我希望通过在我的文本中添加大约 5 像素的图像间距来为我的图像创建一些“呼吸空间”。 通常它很容易通过填充、边距或定位来解决，但这次不是:( 我尝试用 dd's、dl's 等替换 p 标签……但由于某种原因，我尝试的所有技术都没有取得成果。我正在使用引导程序，所以我知道预先编写的代码可以覆盖我的。

<div class="container">
    <div class="row">
            <div class="col-md-10" id="abouttext">
            <img  id="aboutphoto" src="../images/Micheal_morrison.jpg" class="col-sm-4 pull-left img-thumbnail img-responsive" alt="image"/>
            <h3>Doctor</h3>
            <p>dLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>

            <h4>How does it work?</h4>
            <p>dLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>

            <h4>Why Intuitive healing? </h4>
            <p>dLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
            </div>
    </div>
</div>

css 有点乱，因为我一直在尝试很多不同的方法，但现在是这样：

#p {
 padding-left: 50px;
 margin-left: 10px;
}

#aboutphoto {
 position: absolute;
 padding: 10px;
 margin: 10px;
}
abouttext.p {
  min-width: 450px;
  max-width: 650px;
  text-align: left;
  padding: 15px;
  margin: 0px;
  position: absolute;
  overflow: hidden;
  }

同样，单位已关闭，但我只是在浏览器页面中寻找结果。

非常感谢您的帮助！

Answer 1

您能详细说明一下您要做什么吗？您已将 position: absolute 放在图像上，这将导致它与 DOM 层次结构分离并放置在您的文本上方。

我创建了一个 JSFiddle 来使用 float: left 将图像放回原位，并假设这就是您想要做的。否则，请详细说明您的预期结果。

这里的JSFiddle：http://jsfiddle.net/volzy/atx26f2z/

#aboutphoto {
    float: left;
    padding: 10px;
    margin: 10px;
}

Answer 2

看起来问题在于您使用了posiiton:absolute。 （你也有 col-md-10 然后 col-sm-4 嵌套在 img 标签中，这通常不是这个网格系统的工作方式。）

参见示例。

#aboutphoto {
  padding: 10px;
  margin: 20px 20px 5px 0px;
}
#abouttext.p {
  min-width: 450px;
  max-width: 650px;
  text-align: left;
  padding: 15px;
}
@media (max-width: 992px) {
  #aboutphoto {
    margin: 0 20px 5px 0px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12" id="abouttext">
      <img id="aboutphoto" src="http://placehold.it/150x150" class="pull-left img-thumbnail img-responsive" alt="Dr" />
      <h3>Doctor</h3>

      <p>dLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
      <h4>How does it work?</h4>

      <p>dLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
      <h4>Why Intuitive healing? </h4>

      <p>dLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
    </div>
  </div>
</div>

Answer 3

您将所有内容都放在一个 div 中，这给您带来了问题。

试试这个：

<div class="container">
<div class="row">
        <div class="col-md-3" id="abouttext">
        <img  id="aboutphoto" src="../images/Micheal_morrison.jpg" class="pull-left img-thumbnail img-responsive" alt="Dr.Michael Morrison"/>
        </div>
        <div class="col-md-7" id="abouttext">
        <h3>Doctor</h3>
        <p>dLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>

        <h4>How does it work?</h4>
        <p>dLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>

        <h4>Why Intuitive healing? </h4>
        <p>dLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
        </div>
</div>

这里我们有两个 div，图片很好地分开了。