CSS图像网格没有清晰的列 [英] CSS image grid without clear columns

问题描述

一位客户要求我修复他们的图片网格CSS。虽然我认为他们只是用HTML来解决这个问题，但它确实能正常工作，看起来这个问题稍微有点技术性，然后我开始想。

因为我想不出来正确的关键字谷歌也没有太大的帮助。

我的问题是这样的：

横幅是PNG的。如你所见，底部的3x1横幅应与其他3x1横幅的底部对齐。

如果我正在处理列（在这种情况下是2），但我不是这种情况。由于有时图像的宽度为多列，因此两者之间没有明确的界限。

HTML：

 < div class =page-banners grid-container> 
< div class =grid12-6 banner> 
< img src =3x1.png/> 
< / div> 
< div class =grid12-6 banner> 
< img src =3x2.png/> 
< / div> 
< div class =grid12-6 banner> 
< img src =3x1.png/> 
< / div> 
< / div> 
  

CSS：

  .grid12-6 {
 width：48％; 
} 
 .grid12-1，.grid12-2，.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; 
保证金余额：1％; 
保证金率：1％; 
 
 $ / code> 

更改



 浮动：左; 
  

至

 显示：内联块; 
  

并没有这样做，它只是让第一个3x1横幅与3x2的基线垂直对齐。



答案可能相当简单。但是我花了很多时间盯着它。

下面是一个例子（在excel中制作），如果所有图像都是插入。每种颜色作为横幅的占位符。

基本上，这是我想要的，但没有JavaScript。
http://desandro.github.io/masonry/ demos / basic-multi-column.html

解决方案

应该足以将图像放在一个列中，没有试过它

 < div class =page-banners grid-container> 
< div class =grid12-6 banner> 
< img src =3x1.png/> 
< img src =3x1.png/> 
< / div> 
< div class =grid12-6 banner> 
< img src =3x2.png/> 
< / div> 
< / div> 
  

您可能需要调整它们之间的空间

A client asked me to fix their image grid CSS. While I thought they just screwed around to much with the HTML for it to function properly it seems the problem is a bit more technical then I initially thought.

Because I cannot think of the right keywords google isn't much help either.

My problem is this: the banners are png's. And as you might figure, the bottom 3x1 banner should align to the bottom of the other 3x1 banner.

This isn't really a problem if I'm working with columns (in this case 2), but I that's not the case. Since sometimes an image takes on a width of multiple columns, there is no clear line in between.

HTML:

<div class="page-banners grid-container">
        <div class="grid12-6 banner">
                <img src="3x1.png" />
        </div>
        <div class="grid12-6 banner">
                <img src="3x2.png" />
        </div>
        <div class="grid12-6 banner">
                <img src="3x1.png" />
        </div>
</div>

CSS:

.grid12-6 {
    width: 48%;
}
.grid12-1, .grid12-2, .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%;
}

Changing

float:left;

to

display:inline-block;

doesn't do the trick, it just makes the first 3x1 banner vertically align to the baseline of 3x2.

The answer is probably fairly simple. But I've spend way to much time staring at it.

Below is an example (made in excel) for the page could 'look' like if all the images were inserted. Each color as a placeholder for a banner.

Basically, this is what I want, but without the javascript. http://desandro.github.io/masonry/demos/basic-multi-column.html

解决方案

It should be enough to put the images together into one column, havent tried it

<div class="page-banners grid-container">
    <div class="grid12-6 banner">
        <img src="3x1.png" />
        <img src="3x1.png" />
    </div>
    <div class="grid12-6 banner">
        <img src="3x2.png" />
    </div>
</div>

you might need to adjust the space between them

这篇关于CSS图像网格没有清晰的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！