Question

我有四张左右对齐的图像。除了第三张图像低于第二张图像。两者都与第一张图像的右侧对齐。第四个图像与第二个和第三个图像的右侧对齐（彼此堆叠在一起）。

见图： http://www.gliffy.com/go/publish/9802269

如何在CSS中实现此功能？

我有以下代码：

<div class="examples">
    <div class="example"><img src="examples/1.jpg" /></div>
    <div class="example"><img src="examples/2.jpg" /></div>
    <div class="example"><img src="examples/3.jpg" /></div>
    <div class="example"><img src="examples/4.jpg" /></div>
</div>

我想自动执行此操作。没有黑客使用HTML。

我让它们并排排列，但我无法弄清楚如何对齐第二张和第三张图像，以便第二张图像位于第三张图像的顶部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .examples {
            position: relative;
            display: block;
            box-sizing: border-box;
            height: 100vh;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .example {
            position: absolute;
            background-size: cover;
            background-repeat: no-repeat;
            width: 33.33%;
            cursor: pointer;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-position: 50% 50%;
        }
        .example:nth-child(1) {
            top: 0;
            left: 0;
            height: 100%;
            background-image: url(examples/1.jpg);
        }
        .example:nth-child(2) {
            top: 0;
            left: 33.33%;
            height: 50%;
            background-image: url('examples/2.jpg');
        }
        .example:nth-child(3) {
            top: 50%;
            left: 33.33%;
            height: 50%;
            background-image: url('examples/3.jpg');
        }

        .example:nth-child(4) {
            top: 0;
            left: 66.66%;
            height: 100%;
            background-image: url('examples/4.jpg');
        }
    </style>
</head>
<body>
<div class="examples">
    <div class="example"></div>
    <div class="example"></div>
    <div class="example"></div>
    <div class="example"></div>
</div>
</body>
</html>

Answer 1

这是一个纯CSS解决方案。有一点需要注意的是，您会以某种尺寸遇到pixel rounding，导致图像在某些视口大小时会被一两个像素关闭。

＆＃13;

    .examples {
      position: relative;
      display: block;
      box-sizing: border-box;
    }
    .example {
        width: 25%;
        height: auto;
        position: absolute;
        margin: 0;
        padding: 0;
        display: inline-block;
        box-sizing: border-box;
    }
    .example img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
        padding: 0;
    }
    
    .example:nth-child(1) {
      position: relative;
    }
  
    .example:nth-child(3) {
      margin-top: 12.475%;
      margin-bottom:-50%;
    }
    
    .example:nth-child(4) {
      left: 50%;
    }

＆＃13;

<div class="examples">
   <div class="example"><img src="http://placehold.it/400x400&text=Image1" /></div>
   <div class="example"><img src="http://placehold.it/400x200&text=Image2" /></div>
   <div class="example"><img src="http://placehold.it/400x200&text=Image3" /></div>
   <div class="example"><img src="http://placehold.it/400x400&text=Image4" /></div>
</div>

＆＃13;

工作jsFiddle

Answer 2

<强> HTML

.y

<强> CSS

<div class="examples">
    <div class="example"><img src="examples/1.jpg" /></div>
    <div class="example"><img src="examples/2.jpg" /></div>
    <div class="example"><img src="examples/3.jpg" /></div>
    <div class="example"><img src="examples/4.jpg" /></div>
</div>

使用http://autoprefixer.github.io/进行跨浏览器支持。

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

将来，提供代码簿

对您来说是礼貌的

Answer 3

我认为你应该将第二张和第三张图片包装在第一张图像和第四张图像之间的浮点数上，如下所示：

<div class="examples">
  <div class="example"></div>
  <div class="wrap">
    <div class="example-half"></div>
    <div class="example-half"></div>
  </div>
  <div class="example"></div>
</div>

然后换行类上的图像上有一个显示块

.example {
  background:red;
  padding: 20px 20px;
}
.wrap, .example {
  float: left;
}
.example-half {
  background:blue;
  display: block;
  padding: 10px 10px;
}
.example, .example-half {
  width: 50px;
  margin: 0;
}

你可以做造型等。希望这有助于goodluck

我创造了一个简单的小提琴here

Answer 4

我找到了有用的东西。我不知道我是否会为你的照片工作。如果没有，请告诉我。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.example {
    width: 25%;
    float: left;
    margin: 0;
    padding: 0;
}
.example img {
    width: 100%;
    height: auto;
    display: block;
}

</style>
</head>
<body>
<div class="examples">
    <div class="example"><img src="examples/1.jpg" /></div>
    <div class="example">
        <div class="second"><img src="examples/2.jpg" /></div>
        <div class="third"><img src="examples/3.jpg" /></div>
    </div>
    <div class="example"><img src="examples/4.jpg" /></div>
</div>
</body>
</html>

Answer 5

由于你不接受任何先前的答案，这里有一个我玩的插件：

http://plnkr.co/edit/di1vBRu0pzzLDbWRtp2K?p=preview

CSS
.example img {
    width: 200px;
    height: 200px;
    display: block;
    float: left;
    border:1px solid;
}

.example2 img {
    width: 100px;
    height: 100px;
    display: block;
    border:1px solid;
}


.example3 img {
    width: 200px;
    height: 200px;
    position:absolute;
    top:8px;
    right:321px;
    border:1px solid;
}

HTML

<div class="examples">
    <div class="example"><img src="examples/1.jpg" /></div>
    <div class="example2"><img src="examples/2.jpg" /></div>
    <div class="example2"><img src="examples/3.jpg" /></div>
    <div class="example3"><img src="examples/4.jpg" /></div>
</div>

Answer 6

我在没有触及html的情况下完成了一个，并且我为div 2和3添加了一个额外的包装器。带有额外包装的那个是更好的解决方案，尤其是如果必须响应的话。

.examples{display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
box-shadow:9px 12px 8px grey;
height:210px;width:50%;margin:10px auto;
}

链接到codepen

pull request

如何在CSS中实现一个库

6 个答案: