2

私は非常に単純なことをしようとしています。テキストを <div>. 私は以前に2つdivのフローティングでこの問題を抱えていました。それらをクリアしてワードラップを使用してみましたが、問題は解決しませんでした。だから私はそれを保留にしてから、何か新しいことに移りました。

divフローティングではない別のものを作成しているときに、<p></p>タグの内側にテキストを配置すると、テキストがタグの外側に拡張されることに気付きdivました。<p>最初にタグにテキストを配置するのを忘れて、テキストがボックスに残ったので、これを知っています。修正したらまた文字が伸びました。助けてください。シンプルなものであるべきだとわかっていることのために、私は髪を引っ張っています。

補足: は使いたくありませんoverflow:scroll;。そのための十分なテキストがありません。

#topNews {
    width: 625px;
    height: 220px;
    position: relative;
    font-family: Arial Arial, Helvetica, sans-serif;
    font-size: 14px;
    border-bottom: solid #7e7d7d thin;
    float: left;
    margin-left: -30px;
    margin-top: -15px;
}

#about {
    width: 320px;
    height: 180px;
    position: relative;
    margin-right: 3px;
    margin-left: 3px;
    margin-top: 7px;
    border: dashed red thin;
}

<div id="topNews">
    <div id="about">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit.
        </p>              
    </div>
</div>
4

5 に答える 5

1

そのdiv理由はなくなった

#topNews {  
    width: 625px;  
    height: 220px;  
    position: relative;  
    font-family: Arial Arial, Helvetica, sans-serif;  
    font-size: 14px;  
    border-bottom: solid #7e7d7d thin;   
    float: left;  
    margin-left: -30px;  
    margin-top: -15px;  
}

コードでは、マージンを -ve 値で指定します。したがって、その開始位置は -ve x 軸にある可能性があります。

+ve の x 軸値を使用します... のように

 margin-left: 0px;  
 margin-top: 0px;

フィドルリンク

于 2012-11-15T04:57:59.753 に答える
1

テキストは div 内にあります。使用したため、div だけがビューの外に配置されています。

margin-left: -30px;
margin-top: -15px;

この画像をチェックしてください：クリック（-30と-15を0と0に編集しました）

今後の作業を容易にするために、開発者ツールを使用してください (デフォルトでは f12)

于 2012-11-15T05:00:50.927 に答える
0

サンプルコードを試してみたところ、テキストはDIVに適切に含まれています..

于 2012-11-15T04:55:02.840 に答える
0

おそらく、p タグのサイズを変更した後のどこかに css があります。また、幅が 100% のものがある場合 (つまり: width: 100%;)、常に 100% にマージン/パディングのサイズを加えたもので、要素がはみ出してしまいます。

于 2012-11-15T05:07:52.593 に答える
0

これはあなたに役立つと思います。

HTML

<div id="topNews">
    <div id="about">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit.
        </p>              
    </div>

    <div id="about">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit.
        </p>              
    </div>
</div>

CSS

#topNews{
    width:625px;
    height:220px;
    position:relative;
    font-family:Arial Arial, Helvetica, sans-serif;
    font-size: 14px;
    border-bottom:solid #7e7d7d thin;
}

#about{
    width:200px;
    float:left;
    margin-right:3px;
    margin-left:3px;
    margin-top:7px;
    padding:5px;
    border: dashed red thin;
}
于 2012-11-15T05:06:59.160 に答える