文字拥抱太靠近图像引导

Question

我正在寻找创建一些“呼吸空间”为我的形象，从图像添加约5px的分离到我的文本。 通常很容易解决与填充，保证金或定位，但不是这次:( 我试着用dd，dl等替换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使用浮动把图像回到原位：左，假设这是你想做什么。否则，请详细说明您的预期结果。

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

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

Answer 2

你有一个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的和图片被很好地分离。

Answer 3

它看起来像问题是你使用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>