css - 如何在流畅的布局上显示 X + (1/3) 图像？

Question

示例:http://jsfiddle.net/AtbFR/2 .

我有一个流式布局，两侧各有两列。这是 100% 的填充边距，并允许列内的液体布局。

您可以调整浏览器的大小，以查看浏览器越宽显示的图像越多。这是理想的，但我需要一点点改变。它总是显示可变的“X”数量的图像。我需要它来显示 X+(1/3) 张图像，所以如果它是一个非常大的窗口，它将显示 10 个全宽图像，而最后一个图像只显示 1/3。

#list {
  width:80%;
  border:1px solid black;
  margin: 0 auto;
}
#list ul {
  height:40px;
   overflow:hidden;
}

#list ul li {
  display:inline;
}

Answer 1

尝试在 ul 上设置最小宽度，并在 #list div 上设置 overflow:hidden。

http://jsfiddle.net/AtbFR/3/

#list {
  width:80%;
  border:1px solid black;
  margin: 0 auto;
  overflow:hidden;
}
#list ul {
  height:40px;
   overflow:hidden;
  min-width:80px;
}