嗨,大家好,
我正在尝试实现[原始图像]中显示的效果,其中“浏览集合” div和“请求手册” div与上面的四个项目对齐。
我试图通过使用bootstrap来实现效果,并认为将元素放入bootstraps“容器”类中会使所有内容对齐。我还没有设法使它工作,并且右侧没有对齐。有人可以提出解决方案吗?下面是我的代码。谢谢!
body {
font-family: 'Merriweather', serif;
}
/* content Area 2 */
.contentarea2{
background-color: #e3e2da;
width: 100%;
height: 585px;
position: relative;
}
.squares{
padding-top: 120px;
position: relative;
height: 100%;
}
.optionswrapper{
width: 100%;
height: 75px;
bottom: 0;
position: absolute;
color: orange;
}
.option1{
width: 50%;
height: 75px;
background-color: #2a2a2a;
float: left;
}
.option2 {
width: 50%;
height: 75px;
background-color: #9b998f;
float: right;
}
/* buttons */
.collection {
border-radius: 20px;
background-color: Transparent;
padding: 10px;
}
.collection:hover{
border-radius: 20px;
background-color: #3d3d3d;
padding: 10px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
/* animations */
.fade2 {
opacity: 1;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.fade2:hover {
opacity: 0.5;
}
.overlay-portfolio{
padding: 25px;
position: absolute;
z-index:100;
bottom: 15px;
left: 5px;
color: #FFFFFF;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>container</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="custom.css" rel="stylesheet">
<!-- fonts -->
<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="contentarea2">
<div class="container squares">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<a href="#"><img class="img-responsive fade2" src="img/square1.jpg" alt="client 1"></a>
<div class="overlay-portfolio">
<h3>Modern</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<a href="#"><img class="img-responsive fade2" src="img/square2.jpg" alt="client 1"></a>
<div class="overlay-portfolio">
<h3>Contemporary</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<a href="#"><img class="img-responsive fade2" src="img/square3.jpg" alt="client 1"></a>
<div class="overlay-portfolio">
<h3>Minimalist</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<a href="#"><img class="img-responsive fade2" src="img/square4.jpg" alt="client 1"></a>
<div class="overlay-portfolio">
<h3>Classic</h3>
</div>
</div>
</div>
<div class="optionswrapper">
<div class="option1">
</div>
<div class="option2">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
最佳答案
从您的方块中删除内联类,然后添加类col-xs-height col-top
并用row-same-height
替换行容器
那应该使它们全部成比例。