css - 浏览器调整大小时HTML框移动

Question

当我调整浏览器的大小时，中间的三个元素（适合所有​​人，这是一个大社区，很有趣）的位置不会保持不变。第三个盒子在另外两个盒子下面。

这是链接，http://www.archimedus.com/archimedus/

我已经与这个 css 问题斗争了一天。

这可能很简单，但我仍然无法弄清楚我犯了什么错误。

有人可以请教。

Answer 1

首先检查您的 html 标记。您必须使用bottom_text类而不是 id's 。您不应该在文档中重复 id。

然后你必须决定你想要在你的 div 宽度上发生什么

具体到你的问题

如果目标是避免重定位效应，则将 then 包装在一个容器 div中，让它们漂浮在其中。然后为您的包装器 div 设置最小宽度。决定如何处理它的溢出。

您的浮动 div 可以使用相对边距以获得一些灵活的布局等...

Answer 2

解决此问题的最简单方法是将框的最大宽度设置为 33%。

#content_mass_bottom #bottom_text {
   float: left;
   width: 425px;
   max-width: 33%;
}

Answer 3

您可以将您bottom_text的 div 移动到tbox1/2/3div 中。

   <div id="tbox1">
        <img src="/archimedus/images/everybody.png" class="everybody">      
        <div id="bottom_text">
            <p class="bottom_text">Many hands make light work. Imagine what we can achieve with our collective abilities With Archimedus there is an unlimited amount of knowledge available, waiting to be tapped by you. You’ll never be bored again. Best of all… it’s free!</p>
        </div>
    </div>