Question

当我想让我的文本从“block”标签的右半边的左侧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;        
    }

Answer 1

这种情况正在发生，因为你的元素是浮动的，并且额外的10px，它们不能并排放在容器div中。

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

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

<强>＆GT; Fiddle＆lt;

Answer 2

您为父元素指定了固定宽度，并为子元素指定了float属性。

在这里，您正确地分割子元素之间的父元素的宽度，现在如果向子元素添加margin-left或margin-right（或padding），那么该子元素将会关闭。

所以，你可以在这里做两件事

减少子元素的宽度（基于添加的边距/填充）或
调整额外的保证金属性。（ + 1-1 = 0 ）

像这样，

如果您提供margin-left:10px;，请同时提供margin-right:-10px。这将保持平衡，不会影响布局。

Answer 3

您的 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;        
};

宽度：480px + margin-left / padding-left：10px = 490px - ＆gt;容器需要更多空间，然后 480px 。

所以，放width:470px。

或者加上#container .part width:970px;。

或#container .part.halfright width:470px。

等等......

JSFiddle

添加margin-left后，文本在屏幕外推出：10px;

3 个答案: