stackoom
  简体   繁体   中英

I need help aligning these figure pictures nicely

 原文  2016-06-13 20:44:21  5   3    html/ css/ alignment

Question

This just would not align nicely for me, one of the pictures would always float out.

Live page here : http://beta.urdailyspot.com/

I have not idea how to fix it. I tried messing with the CSS and still could not find the problem.

Please view in full page: 

 *, *: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 answers

solution1
 2 ACCPTED  2016-06-13 20:57:06

My quickest solution:

Your 3rd Div (With the microsoft holo lens) can easily fix this issue by floating right instead of left.

Please add in this CSS: 

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

and add in the class float-right to the div.

See this codepen example: http://codepen.io/anon/pen/yJOvqL

solution2
 0  2016-06-13 21:05:29

Try giving "clear" for all the odd figure tags 

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

solution3
 -2  2016-06-13 20:57:57

You may remove the float:left and width on .grid figure and try following: 

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

Probably you will need to adjust the values ;)

Current browser support: http://caniuse.com/#search=columns

UPDATE: missing column-count . Info for downvoters, please check it on the real site first and the vote.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Need help in aligning pictures with text I need help about aligning text boxes Need help aligning a text I need help aligning image and links within the same div I need some help aligning my nav bar in css I need help aligning custom sized div's I need help aligning one of my HTML boxes properly Need some help aligning this text Need help aligning tables …HTML Need help aligning divs with CSS
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM