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 上设置溢出：隐藏。

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;
}