我正在为网站制作一些网格元素。该演示可以为seen here。
有两列的行。我希望它们保持相同的高度，直到达到断点768 px。在列上设置高度是否不正确？
如果没有，我应该在class="card"上设置高度吗？
我的建议不是像这样设置高度吗？
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content {
margin-bottom: 20px;
/*padding: 50px 0px;*/
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 1s, color 1s;
min-height: 20px;
background-color: #002E5B;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
@media (max-width: 768px) {
.index-content .col-lg-4 {
margin-top: 20px;
}
}
/* Card < 768px */
@media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
}
/* GRID ELEMENTS */
/* Global CSS*/
.row > div{
margin-bottom: 15px;
}
.content{
background: #b4bac0;
min-height: 300px;
}
/* When there is 2 columns on top of eachother */
.sidebar{
background: #b4bac0;
min-height: 300px;
}
.sidebar-top{
min-height: 140px;
background: #dbdfe7;
}
.sidebar-bottom{
min-height: 145px;
background: #7e8aa0;
margin-bottom: -15px;
}
/* Padding used for the core CSS */
.small-padding.top {
padding-top:5px;
}
.small-padding.bottom {
padding-bottom:5px;
}
.small-padding.left {
padding-left:7.5px;
}
.small-padding.right {
padding-right:7.5px;
}
button {
float-right
}
/* Media quries */
@media only screen and (max-width: 768px) {
.row {
margin-left: -7.5px;
margin-right: -7.5px;
}
.row>[class*="col-"] {
padding-left: 7.5px;
padding-right: 7.5px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>GRID PANEL MERGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="index-content">
<div class="container">
<a href="#">
<div class="col-lg-12">
<div class="card">
<img src="https://image.ibb.co/nJ97Go/bmw.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="blue-button">Read More</a>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="index-content">
<div class="container">
<div class="col-sm-4">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
<a href="#" class="blue-button">Read More</a>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="card">
<img src="https://image.ibb.co/nJ97Go/bmw.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
<a href="#" class="blue-button">Read More</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
我不确定这是否是您想要的。但是在这种情况下，我喜欢使用flexbox。
我在您的代码中添加了一个小的flexbox容器。
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content {
margin-bottom: 20px;
/*padding: 50px 0px;*/
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 1s, color 1s;
min-height: 20px;
background-color: #002E5B;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
@media (max-width: 768px) {
.index-content .col-lg-4 {
margin-top: 20px;
}
}
/* Card < 768px */
@media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
}
/* GRID ELEMENTS */
/* Global CSS*/
.row > div{
margin-bottom: 15px;
}
.content{
background: #b4bac0;
min-height: 300px;
}
/* When there is 2 columns on top of eachother */
.sidebar{
background: #b4bac0;
min-height: 300px;
}
.sidebar-top{
min-height: 140px;
background: #dbdfe7;
}
.sidebar-bottom{
min-height: 145px;
background: #7e8aa0;
margin-bottom: -15px;
}
/* Padding used for the core CSS */
.small-padding.top {
padding-top:5px;
}
.small-padding.bottom {
padding-bottom:5px;
}
.small-padding.left {
padding-left:7.5px;
}
.small-padding.right {
padding-right:7.5px;
}
/* Media quries */
@media only screen and (max-width: 768px) {
.row {
margin-left: -7.5px;
margin-right: -7.5px;
}
.row>[class*="col-"] {
padding-left: 7.5px;
padding-right: 7.5px;
}
.flex-container {
flex-direction:column;
}
.card-container {
margin-bottom: 15px;
}
}
.flex-container {
display: flex;
}
.card-container {
padding-right: 15px;
padding-left: 15px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>GRID PANEL MERGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="index-content">
<div class="container">
<a href="#">
<div class="col-lg-12">
<div class="card">
<img src="https://image.ibb.co/nJ97Go/bmw.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="blue-button">Read More</a>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row">
<div class="index-content">
<div class="container">
<div class="flex-container">
<div class="card-container">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
<a href="#" class="blue-button">Read More</a>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://image.ibb.co/nJ97Go/bmw.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
<a href="#" class="blue-button">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>