0

当我想让我的文本在“块”标签右半部分的左侧距左侧 10 像素处开始时，会发生一些奇怪的事情。当我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;        
    }
4

3 回答 3

2

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

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

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

>小提琴<

于 2013-03-27T13:06:35.867 回答
1

您正在为父元素提供固定宽度并将 float 属性分配给子元素。

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

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

  • 减小子元素的宽度（基于添加的边距/填充）或
  • 在您的额外边距属性中进行调整。( +1-1 = 0 )

像这样的东西，

如果你给margin-left:10px;那么也给margin-right:-10px。这将保持平衡并且不会影响布局。

于 2013-03-27T13:06:27.843 回答
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;        
};

Width:480px + margin-left/padding-left:10px = 490px -> 容器需要比 480px 更多的空间。

所以，放width:470px。

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

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

等等...

JSF中。

于 2013-03-27T13:09:42.443 回答