我不明白我是如何动态调整UL中的div

我使用PHP动态填充使用li元素的div。我无法将可滚动区域限制为内容。我以前在我的ul中使用了额外空间的垃圾负载，而我仍然是但是当我在css中将高度设置为70％时，它完美地工作。我不明白我是如何动态调整UL中的div

这是因为UL传统上是垂直的，我迫使它水平？

继承人链接到工作现场http://www.evan-livingston.com/test/gallery.php

我的CSS：

div#lasteventimg { 
    width: 100%; 
    heigth: 200px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    position: relative; 
} 

div#lasteventimg ul { 
    list-style: none; 
    height: 70%; 
    width: 8000px;  
    margin: auto; 
} 

div#lasteventimg ul li { 
    float:left;  
    display: inline-block; 
} 

div#lasteventimg img { 
    width: 200x; 
    float: left; 
}

来源

2011-05-31 evanlivingston

你的div＃lasteventimg有其height属性拼写错误。

ul是一个块级元素，并按照这种方式呈现。 div也是块级元素。

因为你已经漂浮了，他们坐在一起，直到容器水平放满。然后他们将换行到下一行。为了防止包装，你可以使用溢出滚动，但ul不支持这个属性。所以相反，你使用包含div的溢出。

很难说出为什么你的老人不工作，而你的新方法在没有示例代码的情况下工作。

来源

2011-05-31 01:33:03 mrtsherman

高度为一个像素值，而不是百分比，这是唯一的区别。 – evanlivingston 2011-05-31 01:48:55

当我将你的ul高度从％切换到px时，它完全一样。 Chrome 10.％vs px不会有所作为。 – mrtsherman 2011-05-31 02:54:08

您可以通过在JQuery中做这件事来节省自己的时间。看看这article这应该有所帮助，并使它看起来好10倍。

来源

2011-05-31 02:00:04

看了之后，看起来jQuery在这种情况下比它的价值更麻烦。难道我不能只是做一些不错的CSS样式而获得接近相同的结果吗？ – evanlivingston 2011-06-01 05:29:03

也许，与<div>更换<li>元素和删除我的UL的<ul>

div#lasteventimg { 
    overflow-x: scroll; 
    overflow-y: hidden; 
    width: 70%; 
} 
div#lasteventimg ul { 
    list-style: none outside none; 
    margin: auto; 
} 
div#lasteventimg div { 
    display: table-cell; 
} 
div#lasteventimg img { 
    /* remove the float:left from here */ 
}

来源

2011-05-31 02:03:18 Beno

我不明白我是如何动态调整UL中的div

回答

相关问题