css

Question

我正在尝试创建一个默认列数为 3 的简单响应式图片库。随着 window 宽度变小，列数也应该减少（先是 2，最后是1).

现有代码工作正常，但当图像重新对齐为 2 列时，它们向左对齐，在#container 的右侧留下难看的 space。

我如何动态地增加图像之间的间隙，使图像仍然在 #container 上拉伸，保持 #container 内的所有内容水平对称？谁能帮我解决这个问题。

我已经尝试了一些明显的候选者（例如。#gallery img {align: center}，但 none 成功了。

solution/hint 可以是 css/sass and/or js.

<div id="container">
  <header><h1>My Gallery</h1></header>
  <div id="filter"></div>
  <div id="gallery">
        <img src="http://lorempixel.com/400/200/" alt="Gal" />
        <img src="http://lorempixel.com/400/200/" alt="Gal" />
        <img src="http://lorempixel.com/400/200/" alt="ggg" />
        <img src="http://lorempixel.com/400/200/" alt="gog" />
        <img src="http://lorempixel.com/400/200/" alt="Gallery" />
        <img src="http://lorempixel.com/400/200/" alt="Gallery" />
</div> <!-- end of gallery-->
</div> <!-- end of container -->

CSS:

#container {
  width: 70%;
  margin: 0 auto;
  background-color: gray;
  }

Answer 1

只需将此代码添加到 CSS 部分

#gallery{ text-align: center;}

Answer 2

Html:

  <div id="container">
      <header><h1>My Gallery</h1></header>
      <div id="filter"></div>
      <ul id="gallery">
         <li>
            <img src="http://lorempixel.com/400/200/" alt="Gal" />
         </li>
         <li>
            <img src="http://lorempixel.com/400/200/" alt="Gal" />
         </li>
         <li>
            <img src="http://lorempixel.com/400/200/" alt="Gal" />
         </li>
         <li>
            <img src="http://lorempixel.com/400/200/" alt="Gal" />
         </li>
    </ul> <!-- end of gallery-->
    </div> <!-- end of container -->

Css:

    #container {
      width: 70%;
      margin: 0 auto;
      background-color: gray;
      }
    #gallery{
      width:100%;
      list-style:none;
      clear:both;
       margin:0;
       padding:0;
    }
#gallery:before,
#gallery:after{
    content: " ";
    display: table;
    clear: both;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
    #gallery li{
       margin:0;
       width:23.3333%;
       height:auto;
       display:block;
       float:left;
    }
    #gallery li img{
       display:block;
       margin: 0 auto;
       width:100%;
       max-width:100%;
    }

测试Codepen

css - 根据容器宽度调整间隙或图像的大小

css - resize the gap or image based on container width

alignment

multiple-columns