gpt4 book ai didi

html - CSS div 动态宽度

转载 作者:太空宇宙 更新时间:2023-11-04 16:03:39 27 4
gpt4 key购买 nike

我的 div 宽度有点问题。我给你看我所拥有的图像

Example.

有一个没有指定宽度的外部div,它可以是小的也可以是大的。

在右侧,我们有一个漂浮在右侧的图像。

文本 div 包含填充所有未定义宽度空间的动态宽度。并在未定义宽度的文本中。

我想要的是当文本宽度大于 Text Div 空间时隐藏 Text Div 的溢出。

问题是如何指定宽度以在动态宽度上获得溢出?如果我没有指定任何宽度,如果图像太长,图像将位于文本下方。

希望我说得足够清楚。

感谢您的帮助。

编辑:

为了更清楚,这里有一些代码。

<div class="outside">
<img src="img.jpg" class="img"/>
<div class="text"><p>some text that is too long</p></div>
</div>

<style>
.img {
float: right;
}
.text {
float: left;
overflow: hidden;
}
</style>

问题是 .text 没有任何特定的宽度,所以溢出不起作用

最佳答案

DEMO HERE

让我直截了本地说:

  • 你希望文本在溢出时被剪掉
  • 但是,您想使用包含它的 div 设置限制(这是动态的)

试试这个

<div class="container">
<img src="myimage.jpg" />
<div class="flexi"> some long content</div>
</div>

img{
float:right;
}

.container{
overflow:hidden;
zoom:1;
}

.flexi{
white-space: nowrap;
overflow:hidden;
zoom:1;
}

关于html - CSS div 动态宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9460353/

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