我需要幫助很好地對齊這些圖形圖片
[英]I need help aligning these figure pictures nicely
問題描述
這對我來說不會很好地對齊，其中一張照片總會飄出來。
現場頁面 ： 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>
3 個解決方案
解決方案1
2 已采納 2016-06-13 20:57:06
我最快的解決方案：
你的第3個Div（使用微軟全息鏡頭）可以通過向右而不是向左浮動來輕松解決這個問題。
請添加此CSS：
.grid figure.float-right{
float:right;
}
並將類float-right添加到div中。
請參閱此codepen示例： http ：//codepen.io/anon/pen/yJOvqL
解決方案2
0 2016-06-13 21:05:29
嘗試給所有奇數字標簽“清除”
.grid figure.main:nth-child(2n-1) {
clear: both;
}
解決方案3
-2 2016-06-13 20:57:57
您可以刪除.grid figure上的float:left和width並嘗試以下操作：
.grid {
column-width: 320px;
column-gap: 5px;
column-count: 2;
}
可能你需要調整值;）
當前的瀏覽器支持： http ： //caniuse.com/#search=columns
更新：缺少column-count 。 有關downvoters的信息，請先在真實網站上查看並進行投票。
在將圖片與文本對齊時需要幫助
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.