0

だから私は少し困惑しています。画像を表示するページを作成しようとしています。ウィンドウが最大幅 (~950 px) のとき、行ごとに 5 つの画像を最大間隔で配置したいのですが、小さくするにつれて画像を近づけていき、それらの間に 0 px があると、 1行あたり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

他の誰もが言ったように：

<ul>
 <li>Stuff</li>
  <li> Other Stuff</li>
  </ul>
于 2013-10-19T00:39:24.210 に答える
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

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>

すべての画像を 1 つのリストに入れるのは、より「適切な」マークアップであり、ul にハード最小幅を設定するドアを開きますが、li には % を設定します...これにより、ウィンドウのサイズによって空白が変化します。これでうまくいくかどうかはわかりませんが、お役に立てば幸いです。

于 2013-10-18T20:14:54.920 に答える
0

このような？http://jsfiddle.net/fqTsN/

ところで、あなたの写真から を削除しfloat:leftてください! 私もそれを修正しました（それは水平ではありませんfloat:left;

于 2013-10-18T20:22:18.297 に答える
0

より細かく制御するための最良かつ最速の方法は、メディア クエリを使用することです。または、Bootstrap を使用することもできます。

于 2013-10-18T23:41:56.417 に答える