2

我正在尝试做一些非常简单的事情。我希望我的文本保留在我的 <div>. 我之前在使用两个浮动divs 时遇到了这个问题。我尝试清除它们，并使用自动换行，但这并没有解决问题。所以我把它搁置了，然后转向新的东西。

在创建另一个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

我认为这会对你有所帮助。

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 回答
0

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

于 2012-11-15T05:07:52.593 回答