2013-03-27 15 views
0

当我想让我的文本从“block”标记右侧的左侧10px处开始时,会发生一些奇怪的事情。当我突然添加margin-left: 10px;时,我的所有文本都消失了。任何想法是什么造成这种情况?我该如何解决这个问题?添加margin-left后,文字被推出屏幕:10px;

HTML:

<div id="container"> 
    <div class="part"> 
     <div class="part halfleft"> 
      <p> 
       <img alt="" src="src.png" style="width: 469px; height: 371px; " /></p> 
     </div> 
     <div class="part halfright"> 
      <h7> Title!</h7> 
      <p> 
       Sentence 1</p> 
      <p> 
       Sentence 2</p> 
      <p> 
       Sentence 3</p> 
     </div> 
    </div> 
</div> 

CSS:

#container { 
    margin-bottom: 60px; 
} 
    /*….*/ 
    #container h7 { 
     text-align: left; 
     width: 100%; 
     padding-bottom: 15px; 
     margin-bottom: 35px;  
     font-size: 30px;   
    } 
    #container .part { 
     width: 960px; 
     height: 475px; 
     background-color: #fff; 
     float: left; 
     text-align: left; 
    } 
    #container .part.halfleft { 
     width: 480px; 
     float: left; 
     font-size: 16px;  
    } 
    #container .part.halfright { 
     width: 480px; 
     float: left; 
     padding-top: 30px; 
     /*margin-left: 10px; or padding-left: 10px; pushes text off screen*/ 
     font-size: 16px;   
    } 
+1

试着让你的宽度为470px,并重新添加边距,看看是否修复了它。我也建议在这种情况下使用填充。 – Michael 2013-03-27 13:04:49

+0

感谢大家的快速回复!当然非常逻辑! – 2013-03-27 13:11:37

回答

2

发生这种情况是因为您的元素是浮动的,而额外的10px,它们不能并排放入容器div内。

一个简单的解决方法是从两个浮动的div或5px中的一个中移除10px。

#container .part.halfright { 
     width: 470px; 
     float: left; 
     padding-top: 30px; 
     margin-left: 10px; 
     font-size: 16px;   
} 

>Fiddle <

1

你给固定宽度的父元素和子元素指定float属性。

在这里,您正在正确分割子元素之间的父元素的宽度,现在如果向子元素添加空白左边界或边距右侧(或填充),那么该子元素将会关闭。

所以,你可以在这里做

  • 两件事减少子元素(基于增加保证金/填充)或
  • 在你的额外保证金性能做调整的宽度。 (+ 1-1 = 0

这样的事情,

如果你给margin-left:10px;然后也给margin-right:-10px。这将保持平衡,不影响布局。

1

您的CSS

#container .part.halfright { 
    width: 480px; 
    float: left; 
    padding-top: 30px; 
    /*margin-left: 10px; or padding-left: 10px; pushes text off screen*/ 
    font-size: 16px;   
}; 

宽度:480像素 + 利润率左/填充左:10px的 = 490px - >包含呃需要更多的空间然后480px

所以,把width:470px

或放在#container .partwidth:970px;

#container .part.halfrightwidth:470px

等等......

JSFiddle