Question

我希望通过在图像上添加大约5px的分离来为我的图像创建一些“呼吸空间”。通常用填充，边距或定位很容易解决，但这次不是:( 我尝试用dd，dl等替换p标签......但由于某些原因，我尝试过的技术都没有用。我正在使用bootstrap所以我理解预先编写的代码可以覆盖我的。

<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

你在一个div中拥有所有东西，这会给你带来麻烦。

试试这个：

if ($_POST['m13_2']=="BPCK" && $_POST["m13_3"] == "") 
{
Print("You must choose a color for Product B");
exit();
}

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

Answer 3

看起来问题是您使用posiiton:absolute。（您还col-md-10然后col-sm-4嵌套在img标记内，这通常不是网格系统的工作方式。）

参见示例。

＆＃13;

#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;
  }
}

＆＃13;

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

＆＃13;

文本拥抱太靠近图像引导程序

3 个答案: