添加margin-left后，文字被推出屏幕：10px;

当我想让我的文本从“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;   
    }

来源

2013-03-27 Matthias Vanb

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

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

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

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

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

>Fiddle <

来源

2013-03-27 13:06:35 Bill

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

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

所以，你可以在这里做

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

这样的事情，

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

来源

2013-03-27 13:06:27

您的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。

来源

2013-03-27 13:09:42 Vucko

添加margin-left后，文字被推出屏幕：10px;

回答

相关问题