Question

我有一个网格布局，我希望图片和图例能够对齐。

但是，如果所有的图例都没有相同的大小，那么新线的第一个元素将与左侧的右侧对齐... 我可以只在CSS / HTML中实现这样的东西吗？

  .grid12-2 {
    width: 14.66%;
}

img {
    max-width:100%;
}

.grid12-1, .grid12-2, .grid12-25, .grid12-3, .grid12-4, .grid12-5, .grid12-6, .grid12-7, .grid12-8, .grid12-9, .grid12-10, .grid12-11, .grid12-12, .grid-full, .grid-col2-sidebar, .grid-col2-main {
    display: inline;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
}

<div class="grid12-2 mobile-grid">
    <a class="open-popup-link" href="#popup-feu">    
        <img src="http://lorempixel.com/g/200/200" />
    <p class="project-name">The Dialogue of Fire</p>
    </a>
</div>

Answer 1

您可以设置项目名称的高度，如下所示： Demo

.project-name{
    height:40px;
    background-color:#ccc;
    display:block;
    overflow:hidden;
}

Answer 2

将此添加到您的CSS：

.grid12-2:nth-child(6n+1)
{
    clear:both;
}

Answer 3

不幸的是，我只能认为flexbox可以在这里工作（除非有一些精心设计的CSS表格布局）......或者是JS解决方案。

JSfiddle Demo

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
}
.grid12-2 {
  flex: 0 0 14.66%;
  background: plum;
  margin-bottom: 1%;
}
img {
  max-width: 100%;
}
.grid12-1,
.grid12-2,
.grid12-25,
.grid12-3,
.grid12-4,
.grid12-5,
.grid12-6,
.grid12-7,
.grid12-8,
.grid12-9,
.grid12-10,
.grid12-11,
.grid12-12,
.grid-full,
.grid-col2-sidebar,
.grid-col2-main {
  margin-left: 1%;
  margin-right: 1%;
}
.container {
  max-width: 1200px;
}
.container {
  max-width: 960px;
  width: 96%;
}
.container {
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<div class="container">
  <div class="grid12-2 mobile-grid">
    <a class="open-popup-link" href="#popup-feu">
      <img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" />
      <p class="project-name">The Dialogue of Fire</p>
    </a>

  </div>

  <div class="grid12-2 mobile-grid">
    <a class="open-popup-link" href="#popup-feu">
      <img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" />
      <p class="project-name">The Dialogue of Fire</p>
    </a>

  </div>
  <div class="grid12-2 mobile-grid">
    <a class="open-popup-link" href="#popup-feu">
      <img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" />
      <p class="project-name">The Dialogue of FireFireFireFire</p>
    </a>

  </div>
  <div class="grid12-2 mobile-grid">
    <a class="open-popup-link" href="#popup-feu">
      <img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" />
      <p class="project-name">The Dialogue of Fire</p>
    </a>

  </div>
  <div class="grid12-2 mobile-grid">
    <a class="open-popup-link" href="#popup-feu">
      <img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" />
      <p class="project-name">The Dialogue of Fire</p>
    </a>

  </div>
  <div class="grid12-2 mobile-grid">
    <a class="open-popup-link" href="#popup-feu">
      <img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" />
      <p class="project-name">The Dialogue</p>
    </a>

  </div>
  <div class="grid12-2 mobile-grid">
    <a class="open-popup-link" href="#popup-feu">
      <img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" />
      <p class="project-name">The Dialogue of Fire</p>
    </a>

  </div>
  <div class="grid12-2 mobile-grid">
    <a class="open-popup-link" href="#popup-feu">
      <img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" />
      <p class="project-name">The Dialogue of Fire</p>
    </a>

  </div>
  <div class="grid12-2 mobile-grid">
    <a class="open-popup-link" href="#popup-feu">
      <img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" />
      <p class="project-name">The Dialogue of FireFireFireFire</p>
    </a>

  </div>
  <div class="grid12-2 mobile-grid">
    <a class="open-popup-link" href="#popup-feu">
      <img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" />
      <p class="project-name">The Dialogue of Fire</p>
    </a>

  </div>
  <div class="grid12-2 mobile-grid">
    <a class="open-popup-link" href="#popup-feu">
      <img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" />
      <p class="project-name">The Dialogue of Fire</p>
    </a>

  </div>
  <div class="grid12-2 mobile-grid">
    <a class="open-popup-link" href="#popup-feu">
      <img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" />
      <p class="project-name">The Dialogue</p>
    </a>

  </div>
</div>

＆＃13;

Answer 4

请尝试这个：

.container {
  margin-left: auto;
  margin-right: auto;
}

DEMO

CSS网格：将图像与图例对齐

4 个答案: