时间戳

首页 > 解决方案 > 如何使 div 在特定宽度下对齐到选项卡的侧面？

html - 如何使 div 在特定宽度下对齐到选项卡的侧面？

问题描述

我正在制作一个类似“新闻页面”的网页，它在 16:9 显示器上完美运行，但它在较小宽度的标签上遇到了困难。我想测试 3 个解决方案。

  1. 使保持 div 远离选项卡左侧的边距以指数方式减小宽度
  2. 使边距在一定宽度下消失
  3. 停止使用边距，找到另一种方法使 div 远离选项卡的一侧，并使其在选项卡的某个宽度下消失。

我不知道这些是否有效，但我已经看到页面这样做了，我希望我的页面上有这个功能。可悲的是，我在互联网上没有找到类似的东西，只是觉得无聊。由于我缺乏解决此问题的知识，我没有尝试过任何事情。为了演示这个问题，我的代码：（带有内联 css 的 HTML）

<html>
<body>
    <div style= "width:60%; margin-left:20%;">
    <p style="
    margin:0px;
    word-wrap:break-word;
    margin-top:0px;">Praesent semper, leo ac scelerisque 
volutpat, massa ex volutpat dui, in 
suscipit mauris neque auctor quam. 
Vestibulum vel finibus elit.</p>
    </div>
    </body>
    </html>

如您所见，如果页面缩小到较小的（大约 1000 像素）宽度，则 40% 的空白空间太大了，所以我想找到一种方法来摆脱该边距并将宽度设置为 100% . 我不想坚持使用边距，所以如果有办法使用其他东西，我会很高兴。

我尝试过的事情 N°1：

<html>
<body>
    <div style= "width:60%;  margin: 0 auto; min-width:500px">
    <p style="
    margin:0px;
    word-wrap:break-word;
    margin-top:0px;">Praesent semper, leo ac scelerisque 
volutpat, massa ex volutpat dui, in 
suscipit mauris neque auctor quam. 
Vestibulum vel finibus elit.</p>
    </div>
    </body>
    </html>

通过水平居中 div 并添加一个最小宽度，我已经

  1. 删除边距
  2. 使空白部分在一定宽度下消失

但是这个方法仍然不是我想要使用的，因为如果页面小于给定的值，你必须横向滚动才能阅读。

我在这个站点和其他平台上为许多人提供了帮助，并解决了 flexbox 的问题。谢谢你的帮助。

标签： htmlcss

解决方案

我认为您需要阅读 flex-box

div {
  display: flex;
  flex-flow: flex-start;
  width: 100%;
}
div p {
  flex: 1;
}

如果这不是您的意思，我认为您应该重新提出问题

推荐阅读