左右浮动的两个 div：如何在页面调整大小时使它们保持在同一水平？

发布于 2024-09-30 12:32:14 字数 857 浏览 9 评论 0原文

给定以下 HTML：

<!DOCTYPE html>
<html>
<body>
  <div id="container">
    <div id="left" style="float: left; background-color: #777; width: 500px;">
      Here is some content. Blah blah blah etc.
      <div style="height: 50px;">Some more content</div>
      And finally some more.
    </div>
    <div id="right" style="float: right; background-color: #aaa; width: 500px;">
      Here is some content. Blah blah blah etc.
      <div style="height: 50px;">Some more content</div>
      And finally some more.
    </div>
    <div style="float: clear;"></div>
  </div>
</body>
</html>

当我使用 div#container 或其他标记来防止 div#right 在 div#left 下移动时，我该怎么办调整浏览器窗口的大小，使窗口宽度小于 1000px？

原文

Given the following HTML:

<!DOCTYPE html>
<html>
<body>
  <div id="container">
    <div id="left" style="float: left; background-color: #777; width: 500px;">
      Here is some content. Blah blah blah etc.
      <div style="height: 50px;">Some more content</div>
      And finally some more.
    </div>
    <div id="right" style="float: right; background-color: #aaa; width: 500px;">
      Here is some content. Blah blah blah etc.
      <div style="height: 50px;">Some more content</div>
      And finally some more.
    </div>
    <div style="float: clear;"></div>
  </div>
</body>
</html>

What can I do to div#container or another tag to prevent div#right from moving under div#left when I resize the browser window such that the windows width is smaller then 1000px?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

︶葆Ⅱㄣ 2024-10-07 12:32:14

为您的容器设置 min-width：

#container {
  min-width: 1000px;
}

Set a min-width to your container:

#container {
  min-width: 1000px;
}

回复收藏 0 原文

—━☆沉默づ 2024-10-07 12:32:14

为 #container DIV 指定 min-width: 1000px 属性，这样父级始终足够宽，可以并排容纳两个子级。

回复收藏 0 原文

姜生凉生 2024-10-07 12:32:14

您的代码中的容器 div 未关闭。请检查一次，并应用 min-width:1000px；

回复收藏 0 原文

饮惑 2024-10-07 12:32:14

http://www.w3schools.com/css/default.asp 我学到了所有我的 CSS 在这里，有一个关于定位的部分非常有帮助，我建议您阅读它以了解您现在以及未来的项目。

尝试：

#container {
   position: relative;
}

http://www.w3schools.com/css/default.asp I learned all of my CSS here, there is a section on positioning that is quite helpful I suggest reading it for what your working on now as well as future projects.

Try: