gpt4 book ai didi

css - 正文宽度小于内容宽度

转载 作者:行者123 更新时间:2023-12-02 21:24:55 24 4
gpt4 key购买 nike

我遇到了宽度问题,这很奇怪。请check out this fiddle自己测试一下。

<div class="topbar" style="width:100%; background:#000; color:#fff">
<div class="container" style="width:970px; margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere semper velit, quis gravida dui elementum posuere. Aliquam hendrerit sagittis sapien elementum lacinia. Praesent sagittis, magna sed molestie suscipit, dolor ante pharetra neque, a ornare lorem arcu eget mauris. Donec ornare cursus velit vel mattis. Donec malesuada euismod metus ac posuere. Sed vulputate tortor ac lorem ultrices, eget scelerisque neque tincidunt.....</div>
</div>

问题是当内容比窗口宽度宽时,主体获取的是窗口的宽度而不是内容的宽度。

看看下面的屏幕截图。 enter image description here窗口宽度为 787px,内容宽度为 970px。您可以看到出现了scroll-x 的滚动条。

但是看看当我向右滚动时会发生什么 enter image description hereBody 不会扩展到可用宽度的 100%,但会获取窗口的宽度。

您知道为什么会发生这种情况吗?

最佳答案

display:table 添加到您的正文中。这样它就会根据子内容扩展其区域。

body{display:table;}

DEMO

关于css - 正文宽度小于内容宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25155408/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com