当前位置：文江博客话题详情

智能调整页面大小

发布于 2024-08-24 05:21:53 字数 278 浏览 4 评论 0原文

假设我有一个 HTML 页面，其中包含三个固定宽度的块（如果很重要，它们的高度可以有所不同），如图所示： alt text

我想让它的行为如下图所示：当浏览器屏幕宽度减小时，它不能将所有三个块放在一行中，第一个块下降。 alt text

是否有可能实现这种行为？最好只使用 CSS，但任何可行的解决方案都很棒。

原文

分享到QQ

分享到微博

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

发布评论

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

许你一世情深 2024-08-31 05:21:53

<div style="width: 100%;">
    <div style="display: inline-block; background-color: red; width: 200px;">DIV2</div>
    <div style="display: inline-block; background-color: yellow; width: 200px;">DIV3</div>
    <div style="display: inline-block; float: left; background-color: lightBlue; width: 200px;">DIV1</div>
    <br style="clear: left;">
</div>

这个有效。您将第 1 块作为最后一个块，并且只让该块剩下一个浮动。

<div style="width: 100%;">
    <div style="display: inline-block; background-color: red; width: 200px;">DIV2</div>
    <div style="display: inline-block; background-color: yellow; width: 200px;">DIV3</div>
    <div style="display: inline-block; float: left; background-color: lightBlue; width: 200px;">DIV1</div>
    <br style="clear: left;">
</div>

This one works. You put block 1 as the last one and only make that one float left.

回复收藏 0 原文

情未る 2024-08-31 05:21:53

没有任何 Javascript 技巧，几乎不可能让第一个块下降。另一方面，使用 float: left 制作最右边的水滴则很容易。

回复收藏 0 原文

開玄 2024-08-31 05:21:53

使用带有 float:left 和固定宽度值的 div，

        <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">    
3
    </div>        
        <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
        2    
    </div>
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">    
        1
    </div>

如下所示...
我知道第一个会正确，但这是我在不使用 javascript 的情况下可以做的最简单的事情。

Use divs with float:left and fixed width values

        <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">    
3
    </div>        
        <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
        2    
    </div>
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">    
        1
    </div>

like so...
I am aware that the 1st one will go right but this is the simplest i can do without getting into javascript..

回复收藏 0 原文

他不在意 2024-08-31 05:21:53

将这三个块全部放入一个 div 中，并将其宽度设置为 100%，当屏幕调整大小时，块将自动排列。

回复收藏 0 原文

月亮邮递员 2024-08-31 05:21:53

<div style="width: 100%;">
  <div style="width: 50px; float left;">DIV1</div>
  <div style="width: 50px; float left;">DIV2</div>
  <div style="width: 50px; float left;">DIV3</div>
  <br style="clear: left;" />
</div>

<div style="width: 100%;">
  <div style="width: 50px; float left;">DIV1</div>
  <div style="width: 50px; float left;">DIV2</div>
  <div style="width: 50px; float left;">DIV3</div>
  <br style="clear: left;" />
</div>

回复收藏 0 原文

~没有更多了~