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

如何在 CSS 中创建列宽，使其随着大图像扩展而保持正常大小内容的默认大小？

发布于 2024-08-27 06:24:29 字数 335 浏览 9 评论 0原文

我正在创建一个具有一列布局的 HTML5 网页。基本上，它是一个包含个人帖子的论坛主题。

我已在 CSS 文件中指定该列的宽度为 600 像素，并使用 margin: 0 auto; 将其在窗口中居中。但是，个别帖子中的某些图像大于 600 像素并溢出到列之外。

我想扩大单个帖子以适应更大的图像。但是，我希望所有其他帖子的宽度仍为 600 像素。

现在，我只是使用 overflow:auto 来创建一个滚动条，但这并不理想。是否可以让单个帖子的宽度针对较大的内容而增长，而对于正常的内容则保持固定？仅使用纯 CSS 可以吗？

提前致谢！

原文

分享到QQ

分享到微博

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

发布评论

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

北笙凉宸 2024-09-03 06:24:29

尝试使用 min-width: 600px 而不是 width，尽管它在旧版本的 Internet Explorer 中不起作用。

回复收藏 0 原文

ぺ禁宫浮华殁 2024-09-03 06:24:29

您可以在包含您的帖子的 div 上使用 display:table。您可以通过以下示例标记看到效果：

<html>
  <head>
    <style>
      .post{
        margin:0 auto;
        border:1px solid red;
        display:table;
      }
    </style>
  </head>
    <body style="width:100%;border:1px solid blue;">
      <div class="post" style="width:600px;">
        asd
      </div>
    <div class="post" style="width:900px;">
      asd
    </div>
    </body>
</html>

当然，这在版本 8 下的 IE 中不起作用。

You can use display:table on divs that contain your posts. You can see the effect with this example markup:

<html>
  <head>
    <style>
      .post{
        margin:0 auto;
        border:1px solid red;
        display:table;
      }
    </style>
  </head>
    <body style="width:100%;border:1px solid blue;">
      <div class="post" style="width:600px;">
        asd
      </div>
    <div class="post" style="width:900px;">
      asd
    </div>
    </body>
</html>

Of course this will not work IE under version 8.

回复收藏 0 原文

~没有更多了~