Question

这对我来说不会很好地对齐，其中一张照片总会飘出来。

此处的实时页面：http://beta.urdailyspot.com/

我不知道如何修复它。我试过搞乱CSS但仍然找不到问题。

请查看整页：

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.grid {
  position: relative;
  clear: both;
  margin: 0 auto;
  padding: 1em 0 4em;
  max-width: 1000px;
  list-style: none;
  text-align: center;
}
.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 320px;
  max-width: 480px;
  max-height: 360px;
  width: 48%;
  height: auto;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
}
.grid figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}
.grid figure figcaption {
  padding: 2em;
  color: #fff;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.grid figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}
.grid figure h2 {
  word-spacing: 0.15em;
  font-weight: 300;
}
.grid figure h2 span {
  font-weight: 800;
}
.grid figure h2,
.grid figure p {
  margin: 0;
  font-family: 'Raleway', Arial, sans-serif;
}
.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}
/* Main Card Style */

figure.main {
  z-index: auto;
  overflow: visible;
  background: #000;
}
figure.main img {
  opacity: 0.9px;
  -webkit-transform: perspective(1000px) translate3d(0, 0, 0);
  transform: perspective(1000px) translate3d(0, 0, 0);
}
figure.main p {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 3em;
  padding: 0 1em;
  max-width: 150px;
  border-right: 4px solid #fff;
  text-align: right;
  opacity: 1;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
figure.main figcaption {
  z-index: 1;
}
figure.main:before {
  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.8);
  opacity: 0;
}
figure.main:hover:before {
  opacity: 1;
}
figure.main h2 {
  text-align: left;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
figure.main:before,
figure.main h2:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.main:hover img {
  opacity: 1;
  -webkit-transform: perspective(1000px) translate3d(0, 0, 21px);
  transform: perspective(1000px) translate3d(0, 0, 21px);
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
figure.main:hover p {
  -webkit-transform: perspective(1000px) translate3d(20px, 20px, 0);
  transform: perspective(1000px) translate3d(20px, 20px, 0);
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
figure.main:hover h2 {
  -webkit-transform: perspective(1000px) translate3d(-20px, -20px, 0);
  transform: perspective(1000px) translate3d(-20px, -20px, 0);
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
**The HTML** <body> <div class="grid"> <figure class="main"> <img src="https://cdn3.vox-cdn.com/thumbor/5jYfF6FPmz-5pk3GhbydtfFcn10=/0x0:2560x1707/1280x854/cdn0.vox-cdn.com/uploads/chorus_image/image/49492693/20160329-8A0A9045.0.0.jpg" alt="img22"> <figcaption> <h2>MICROSOFT HOLOLENS</h2> <p>Transform your world with holograms</p> <a href="#">View more</a> </figcaption> </figure> <figure class="main"> <img src="http://content.pulse.ea.com/content/battlefield-portal/en_US/news/battlefield-1/battlefield-1-reveal/_jcr_content/featuredImage/renditions/rendition1.img.jpg" alt="img22"> <figcaption> <h2>BATTLEFIELD 1</h2> <p>Experience large-scale battles in WWI</p> <a href="#">View more</a> </figcaption> </figure> <figure class="main"> <img src="http://www.wired.com/wp-content/uploads/2015/06/apple-watch-ft.jpg" alt="img18"> <figcaption> <h2>APPLE WATCH</h2> <p>Apple's first wearable</p>
 <a href="#">View more</a> </figcaption> </figure> <figure class="main"> <img src="http://o.aolcdn.com/dims-shared/dims3/GLOB/crop/1280x718+0+106/resize/716x402!/format/jpg/quality/85/http://o.aolcdn.com/hss/storage/midas/83beb9832feb444731754ed2cc2ff40/203269521/12-2015-bmw-i8-fd-1.jpg" alt="img22"> <figcaption> <h2>BMW i8</h2> <p>Super car of the future</p> <a href="#">View more</a> </figcaption> </figure> </div> </body>

<div class="grid">
  <figure class="main">
    <img src="https://cdn3.vox-cdn.com/thumbor/5jYfF6FPmz-5pk3GhbydtfFcn10=/0x0:2560x1707/1280x854/cdn0.vox-cdn.com/uploads/chorus_image/image/49492693/20160329-8A0A9045.0.0.jpg" alt="img22">
    <figcaption>
      <h2>MICROSOFT HOLOLENS</h2>
      <p>Transform your world with holograms</p>
      <a href="#">View more</a>
    </figcaption>
  </figure>
  <figure class="main">
    <img src="http://content.pulse.ea.com/content/battlefield-portal/en_US/news/battlefield-1/battlefield-1-reveal/_jcr_content/featuredImage/renditions/rendition1.img.jpg" alt="img22">
    <figcaption>
      <h2>BATTLEFIELD 1</h2>
      <p>Experience large-scale battles in WWI</p>
      <a href="#">View more</a>
    </figcaption>
  </figure>
  <figure class="main">
    <img src="http://www.wired.com/wp-content/uploads/2015/06/apple-watch-ft.jpg" alt="img18">
    <figcaption>
      <h2>APPLE WATCH</h2>
      <p>Apple's first wearable</p>
      <a href="#">View more</a>
    </figcaption>
  </figure>
  <figure class="main">
    <img src="http://o.aolcdn.com/dims-shared/dims3/GLOB/crop/1280x718+0+106/resize/716x402!/format/jpg/quality/85/http://o.aolcdn.com/hss/storage/midas/83beb9832feb444731754ed2cc2ff40/203269521/12-2015-bmw-i8-fd-1.jpg" alt="img22">
    <figcaption>
      <h2>BMW i8</h2>
      <p>Super car of the future</p>
      <a href="#">View more</a>
    </figcaption>
  </figure>
</div>

Answer 1

我最快的解决方案：

你的第3个Div（使用微软全息镜头）可以通过向左而不是向左浮动来轻松解决这个问题。

请添加此CSS：

.grid figure.float-right{
  float:right;
}

并将类float-right添加到div。

请参阅此codepen示例： http://codepen.io/anon/pen/yJOvqL

Answer 2

尝试给予＆＃34;清除＆＃34;对于所有奇数字标签

.grid figure.main:nth-child(2n-1) {
    clear: both;
}

Answer 3

您可以移除float:left上的width和.grid figure并尝试关注：

.grid {
    column-width: 320px;
    column-gap: 5px;
    column-count: 2;
}

您可能需要调整值;）

当前浏览器支持：http://www.bizjournals.com

更新：缺少column-count。关于downvoters的信息，请先在真实网站上查看并投票。

我需要帮助很好地调整这些图形图像

3 个答案:

我最快的解决方案：