我有一个 holder div,它收缩包裹在其他几个 div 周围,所以 holder 没有设置宽度。支架内还有另一个包含文本的 div。当文本太多时,它会扩展支架,因此不再收缩包装。这是我的问题的演示,http://jsfiddle.net/WSbAt/ .这是一个照片库页面。
我想如果不设置支架的宽度可能没有办法,我不能这样做,因为每行的图像数量是动态的。我可能可以用 jQuery 解决这个问题,但我希望有一个 css 解决方案。
编辑:我尽量不指定任何宽度,因为每行的缩略图数量取决于您的窗口大小。
CSS:
#container
{
width:600px; /*only set for demo. will be random on live page*/
border:1px solid black;
text-align:center;
}
#holder
{
display: inline-block;
border:2px solid blue;
}
.thumbnail
{
float:left;
width:100px;
height:100px;
background-color:red;
margin-right:10px;
margin-bottom:10px;
}
.expandedHolder
{
padding:10px;
border:2px solid yellow;
margin-bottom:10px;
margin-right:10px;
}
.fullImage
{
float:left;
width:250px;/*only set for demo. will be random on live page*/
height:200px;
background-color:green;
}
.text
{
float:left;
margin-left:10px;
}
HTML:
<div id="container">
<div id="holder">
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div style="clear:both;"></div>
<div class="expandedHolder">
<div class="fullImage"></div>
<div class="text">some text here. some text here. some text here. </div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
最佳答案
使用百分比作为 .fullImage 和 .text 的宽度
.fullImage
{
float:left;
width:70%;
height:200px;
background-color:green;
}
.text
{
width: auto;
float:left;
width:20%;
margin-left:10px;
}
然后如果文本被大量使用 text-overflow
text-overflow:ellipsis;
overflow:hidden;
关于css - 防止文本展开收缩包装的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16237874/