gpt4 book ai didi

html - 使两个值的 div 宽度最大?

转载 作者:技术小花猫 更新时间:2023-10-29 12:01:28 25 4
gpt4 key购买 nike

考虑下面的基本 HTML:

<body>
Random HTML content
<div class="container">
<!--Some content loaded via ajax or the like -->
</div>
Other random HTML content
</body>

我希望“容器”div 的宽度是三个可能值中的最大值:

  1. 100% 的窗口
  2. 1024px(最佳视觉效果)
  3. 内容的宽度

通过使用 CSS 属性 width:100% 和 min-width:1024px,我已经能够完成#1 和#2。我还可以通过设置 display:inline-block 和 min-width:1024px 来完成#2 和#3。但是,我无法获得全部三个:如果我将 width:100% 添加到 display 和 min-width 属性中,它会覆盖内联 block 显示的子内容大小调整效果,并且只给我 100%宽度,即使这意味着内容溢出。

我知道我可以 overflow hidden 或给 div 本身提供滚动条,但我想要的是让 div 根据需要扩展,或者扩展到窗口的整个宽度,以较大者为准 - 但绝不会窄于 1024 像素。

编辑:注意div中加载的内容可能小于1024px。但是,div 本身绝不能小于该值,因为它不会再与页面其余部分的外观和感觉很好地融合。

最佳答案

您可以通过在第一个 div 之上添加另一个 div 来实现此目的:

<div class="container2">
<div class="container">
</div>
</div>

CSS:

.container2{min-width:100%;  display:inline-block;}
.container{min-width:1024px; width:100%;}

http://jsfiddle.net/om10t3gn/4/

关于html - 使两个值的 div 宽度最大?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30584511/

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