堆栈内存溢出
  简体   繁体   English

我需要帮助很好地对齐这些图形图片

[英]I need help aligning these figure pictures nicely

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

问题描述

This just would not align nicely for me, one of the pictures would always float out. 这对我来说不会很好地对齐，其中一张照片总会飘出来。

Live page here : http://beta.urdailyspot.com/ 现场页面 ： 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. 我试过搞乱CSS但仍然找不到问题。

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 个解决方案

解决方案1
 2 已采纳  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. 你的第3个Div（使用微软全息镜头）可以通过向右而不是向左浮动来轻松解决这个问题。

Please add in this CSS: 请添加此CSS： 

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

and add in the class float-right to the div. 并将类float-right添加到div中。

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

解决方案2
 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;
}

解决方案3
 -2  2016-06-13 20:57:57

You may remove the float:left and width on .grid figure and try following: 您可以删除.grid figure上的float:left和width并尝试以下操作： 

.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 当前的浏览器支持： http ： //caniuse.com/#search=columns

UPDATE: missing column-count . 更新：缺少column-count 。 Info for downvoters, please check it on the real site first and the vote. 有关downvoters的信息，请先在真实网站上查看并进行投票。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在将图片与文本对齐时需要帮助 - Need help in aligning pictures with text 我需要有关对齐文本框的帮助 - I need help about aligning text boxes 需要帮助对齐文本 - Need help aligning a text 我需要在同一div中对齐图像和链接的帮助 - I need help aligning image and links within the same div 我需要一些在CSS中对齐导航栏的帮助 - I need some help aligning my nav bar in css 我需要帮助调整自定义尺寸的div - I need help aligning custom sized div's 我需要帮助正确对齐我的一个 HTML 框 - I need help aligning one of my HTML boxes properly 需要一些对齐此文本的帮助 - Need some help aligning this text 需要帮助对齐表格…HTML - Need help aligning tables …HTML 需要帮助将div与CSS对齐 - Need help aligning divs with CSS
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM