css - 有人可以弄清楚如何将文本正确插入 DIV 中吗？

Question

首先提前感谢，因为这个页面对我学习 HTML 的进步帮助很大。 我正在努力学习它，这样我就可以建立自己的网站，在那里我可以写作。 这就是问题所在: 我想在每个 Div 中插入文本，这与所有内侧的边距都很好地吻合。而且我不希望它超过给定的参数。当我尝试时，它总是移动到 Divs 之外。 如果有人愿意提供帮助，我将不胜感激。

index.html

<div id="content">

<div id="top_news">
<div id="top_news1"></div>
<div id="top_news2"></div>
</div>

<div id="top2_news"></div>

<div id="top3_news">
<div id="top3_news1">
<div id="top3_news1_1"></div>
<div id="top3_news1_2"></div>
</div>
<div id="top3_news2"></div>
<div id="top3_news3"></div>
</div>

</div>

样式表.css

#container {
width            :  930px;
margin           :  auto;
background-color :  #ffffff;
} 

#content {
margin-top       :  7px;
margin-left      :  10px;
margin-right     :  10px;
margin-bottom    :  7px;
border       :  1px solid #d3d3d3;
width        :  908px;
}

#top_news {width:908px; height:250px;}
#top_news1 {width:453px; border-right:1px solid #d3d3d3; height:250px; float:left;}
#top_news1:hover {background-color:#fdb38d;}
#top_news2 {width:454px; height:250px; float:right;}
#top_news2:hover {background-color:#faf5a2;}

#top2_news {width:908px; height:225px; border-top:1px solid #d3d3d3;}
#top2_news:hover {background-color:#70addc;}

#top3_news {width:908px; height:250px; border-top:1px solid #d3d3d3;}
#top3_news1 {width:302px; height:250px; border-right:1px solid #d3d3d3; float:left;}
#top3_news1_1 {width:302px; height:125px;border-bottom:1px solid #d3d3d3;}
#top3_news1_1:hover {background-color:#d5addd;}
#top3_news1_2 {width:302px; height:124px}
#top3_news1_2:hover {background-color:#f0f0f0;}
#top3_news2 {width:302px; height:250px; border-right:1px solid #d3d3d3; float:left;}
#top3_news2:hover {background-color:#b7e795;}
#top3_news3 {width:302px; height:250px; float:left;}
#top3_news3:hover {background-color:#ff6686;}

我遇到了另一个问题，由于支持非常迅速且很有帮助，所以我想在这里提问。 我注意到，当我缩小时，Divs 会移动并且不会停留在我最初计划的位置。有没有人有解决办法？ 提前致谢

Answer 1

将带有填充(扩展默认填充)的 p 标记内的文本附加到 div。要保持框大小，请将 overflow:hidden 添加到 div 或使用 overflow:scroll 使它们可滚动。

DEMO

我希望这就是你想要做的:)