Css 调整浏览器大小时Html框移动 当我调整浏览器的大小时,中间的三个元素(对每个人来说,它是一个大社区,它的乐趣)不保持静态。第三个盒子在另外两个盒子下面

Css 调整浏览器大小时Html框移动 当我调整浏览器的大小时,中间的三个元素(对每个人来说,它是一个大社区,它的乐趣)不保持静态。第三个盒子在另外两个盒子下面,css,static,position,Css,Static,Position,这里是链接 我已经和css问题斗争了一天了 这可能很简单,但我仍然无法找出我犯了什么错误 有人能给点建议吗。解决这个问题的最简单方法是给盒子最大宽度33% #content_mass_bottom #bottom_text { float: left; width: 425px; max-width: 33%; } 您可以将bottom_textdiv移动到tbox1/2/3div中 <div id="tbox1"> <img src=

这里是链接

我已经和css问题斗争了一天了

这可能很简单,但我仍然无法找出我犯了什么错误


有人能给点建议吗。

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

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

您可以将
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 marckup。您必须使用bottom\u text类而不是id类。文档中不应该有重复的id

然后你必须决定你想在你的div中发生什么

针对您的问题

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


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

如果视口不够宽,不能容纳所有3个元素,你认为会发生什么?我想应该有一个水平卷轴,对吗?@Vinod-没有对错之分,但现在最重要的是响应性网页设计。通常,您的元素应该随着视口大小的变化而优雅地进行调整,但我不知道如何进行调整。我已经尝试了所有的定位元素,但仍然无法正确定位。@Vinod好的,那么您希望发生什么?你想让它水平滚动吗?用户通常不喜欢这样,但是你的大标题图像已经限制了在水平滚动进入之前视口的宽度。嘿,贾斯汀,谢谢你的提示。这实际上对我有帮助。:@Vinod欢迎你。如果这是你的正确答案,你能这样做吗?谢谢