Question

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

以下是链接http://www.archimedus.com/archimedus/

我一直在与这个css问题争斗一天。

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

有人可以提出建议。

Answer 1

首先检查你的html marckup。您必须使用 bottom_text 类而不是ID。您不应该在文档中有重复的ID。

然后你必须决定做什么你想要发生你的divs

特定于您的问题

如果目标是避免重定位效果，则将其包裹在容器div 中并让它们浮在其中。然后为你的包装div设置一个最小宽度。决定如何表现它的溢出。

你的floting div可以使用相对边距来获得一些灵活的布局等等......

Answer 2

解决这个问题的最简单方法是给盒子最大宽度33％。

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

Answer 3

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

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

浏览器调整大小时移动的Html框

3 个答案: