0

所以我有点难过。我正在尝试制作一个页面来显示图像。当窗口处于最大宽度（~950 px）时，我希望每行有 5 个最大数量的图像，但我希望它们在你缩小它时变得更近，然后，当它们之间有 0 px 时，会有每行只有 4 个图像，并且将持续到特定宽度。有点像 Instagram，但我不希望图片变小。这是我所拥有的：

HTML

<ul>
   <li>
      <img src="0.png">
   </li>
</ul>
<ul>
   <li>
      <img src="1.png">
   </li>
</ul>
<ul>
   <li>
      <img src="2.png">
   </li>
</ul>

CSS

ul
{
    padding: 0;
    margin: 0;
    list-style-type:  none;
}

ul li
{
    display: inline;
}

//the images are also float left, so they are horizontal

基本上，正如你所看到的，我一无所有，我真的不知道该怎么做。我会很感激任何帮助。谢谢！

4

7 回答 7

0

像这样？http://jsfiddle.net/fqTsN/

float:left顺便从你的照片中删除！我也修好了（它是水平的，没有float:left;

于 2013-10-18T20:22:18.297 回答
0

你能帮我一个忙并尝试这个修复吗（我知道有一个令人讨厌的不可见间距错误与li在 HTML 中的换行符上写的 s 相关，不确定它是否也适用于 UL，但值得一试） -

<ul><li><img src="0.png"></li></ul><ul><li><img src="1.png"></li></ul><ul><li><img src="2.png"></li></ul>
于 2013-10-18T20:13:57.140 回答
0

http://jsfiddle.net/AgLMp/1

CSS

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    max-width: 950px;
    min-width: 600px;
}

ul li {
    float: left;
    width: 33%;
    min-width: 200px;
}

HTML

<ul>
    <li>
        <img src="http://placehold.it/200x200/ff0000/00ffff&text=Image+1" />
    </li>
    <li>
        <img src="http://placehold.it/200x200/00ff00/ff00ff&text=Image+2" />
    </li>
    <li>
        <img src="http://placehold.it/200x200/0000ff/ffff00&text=Image+3" />
    </li>
</ul>
于 2013-10-18T20:15:48.313 回答
0

这可能会让你更接近你想去的地方：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
ul {
    padding: 0;
    margin: 0;
    list-style-type:  none;
    min-width:450px;
}
ul li {
    display: inline;
    float:left;
    width:20%;
}
</style>
</head>

<body>
<ul>
  <li> <img src="0.png" width="150" height="50"> </li>
  <li> <img src="1.png" width="150" height="50"> </li>
  <li> <img src="2.png" width="150" height="50"> </li>
  <li> <img src="0.png" width="150" height="50"> </li>
  <li> <img src="1.png" width="150" height="50"> </li>
  <li> <img src="2.png" width="150" height="50"> </li>
</ul>
</body>
</html>

将所有图像放入一个列表中是更“正确”的标记，并打开了在 ul 上设置硬最小宽度但在 li 上设置 % 的大门……这就是使空白随窗口大小而变化的原因。我不确定这是否能让你一路走好，但希望它会有所帮助！

于 2013-10-18T20:14:54.920 回答
0

您的无序列表应如下所示：

<ul><li><img src="0.png"></li><li><img src="1.png"></li><li><img src="2.png"></li></ul>

超级非常规，但它有效。

在这里小提琴：http: //jsfiddle.net/QMs93/

于 2013-10-18T20:15:09.977 回答
0

获得更多控制权的最佳和最快选择是使用媒体查询，或者您也可以使用 Bootstrap。

于 2013-10-18T23:41:56.417 回答
0

正如其他人所说：

<ul>
 <li>Stuff</li>
  <li> Other Stuff</li>
  </ul>
于 2013-10-19T00:39:24.210 回答