css - 添加 margin-left :10px; 后文本被推离屏幕

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

发生这种情况是因为您的元素是 float 的，并且有额外的 10px，它们无法并排放置在容器 div 中。

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

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

> Fiddle <