嗨,大家好,

我正在尝试实现[原始图像]中显示的效果,其中“浏览集合” 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替换行容器

那应该使它们全部成比例。

10-07 19:53
查看更多