文本在<p>标签中延伸​​出<div>一次？</p> </div>

Question

我正在尝试做一些非常简单的事情。我希望我的文字能够保留在我的<div>中。我之前遇到过两个浮动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>

Answer 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; 

Fiddle link

Answer 2

文本在div中，因为您使用了以下内容，所以div只是位于您的视图之外：

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

看看这张图片：click（我编辑了-30和-15到0和0）

为了让您的工作日后更轻松，请使用开发人员工具（默认情况下为f12）

Answer 3

我刚尝试了您的示例代码，文本正确地包含在DIV中。

Answer 4

我认为这对你有帮助。

<强> 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;
}

Answer 5

也许你改变了p标签的大小之后就有了css。此外，如果您有宽度为100％的任何东西（即：width: 100%;），它总是100％加上边距/填充的大小，这会使元素突出。