时间戳

首页 > 解决方案 > 排列元素（创建 2x2 卡片网格）

html - 排列元素（创建 2x2 卡片网格）

问题描述

我在一个网站 (html) 上工作，并且在使元素正确排列时遇到了一些麻烦。现在，我的页面看起来像HERE，但我希望它看起来像HERE。本质上，我想创建一个 2 x 2 网格。我不知道代码的哪一部分不允许我在一行中有 2 个元素。

在此先感谢您的帮助！

<title></title>
<style type="text/css">body {

  color: #404040;
  font-size: 14px;

  line-height: 22px;


  padding-top: 20px;
}

.card {
  display: inline-block;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
  margin: 5px;
  position: relative;
  margin-bottom: 50px;
  transition: all .2s ease-in-out;
}

.card:hover {
  /*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  margin-bottom: 54px;
}

.image {
  height: 200px;
  opacity: .7;
  overflow: hidden;
  transition: all .2s ease-in-out;
}

.image:hover,
.card:hover .image {
  height: 200px;
  opacity: 1;
}

.text {
  background: #FFF;
  padding: 20px;
  min-height: 200px;
}

.text p {
  margin-bottom: 0px;
}

.fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  margin-top: -50px;
  right: 20px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 48px;
  line-height: 48px;
  text-align: center;
  background: #0066A2;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}

.fab:hover {
  background: #910500;
  cursor: pointer;
  -ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
</style>
<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

<div class="text">
<div class="fab">+</div>

<h3>Our Community</h3>

<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

<div class="text">
<div class="fab">+</div>

<h3>Our Community</h3>

<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

<div class="text">
<div class="fab">+</div>

<h3>Our Community</h3>

<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

<div class="text">
<div class="fab">+</div>

<h3>Our Community</h3>

<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>

标签： htmlcss

解决方案

检查这个包装元素div 然后使用display:flex

https://jsfiddle.net/rkv88/ug3qk1m5

推荐阅读