0

「ブロック」タグの右半分の左側から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;        
    }
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（またはパディング）を追加すると、その子要素は減少します。

したがって、ここでは2つのことができます

  • 子要素の幅を（追加されたマージン/パディングに基づいて）減らすか、
  • 追加のマージンプロパティを調整します。（+ 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;        
};

幅：480px + margin-left / padding-left：10px = 490px- >コンテナには480pxよりも多くのスペースが必要です。

だから、入れてwidth:470px。

または着て#container .part width:970px;ください。

または#container .part.halfright width:470px。

等々...

JSFiddle。

于 2013-03-27T13:09:42.443 に答える