0
大家好，
我試圖達到的顯示在[原圖像]影響，其中「瀏覽集合」 DIV和「請求小冊子」div與他們上面的四個項目對齊。
我試圖通過使用bootstrap來實現效果，並且認爲將元素放在bootstraps「容器」類中會使所有內容排成一列。儘管如此，我還沒有設法讓它正常工作，而右側並沒有排隊。有人可以提出解決方案嗎？下面是我的代碼。謝謝！
body {
\t font-family: 'Merriweather', serif;
\t
}
/* content Area 2 */
\t .contentarea2{
\t \t background-color: #e3e2da;
\t \t width: 100%;
\t \t height: 585px;
\t \t position: relative;
\t }
\t .squares{
\t \t padding-top: 120px;
\t \t position: relative;
\t \t height: 100%;
\t }
\t
\t .optionswrapper{
\t \t width: 100%;
\t \t height: 75px;
\t \t bottom: 0;
\t \t position: absolute;
\t \t color: orange;
\t }
\t
\t .option1{
\t \t width: 50%;
\t \t height: 75px;
\t \t background-color: #2a2a2a;
\t \t float: left;
\t }
\t
\t .option2 {
\t \t width: 50%;
\t \t height: 75px;
\t \t background-color: #9b998f;
\t \t float: right;
\t }
/* buttons */
.collection {
\t border-radius: 20px;
\t background-color: Transparent;
\t padding: 10px;
}
.collection:hover{
\t border-radius: 20px;
\t background-color: #3d3d3d;
\t 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">
\t
\t <!-- Custom CSS -->
\t <link href="custom.css" rel="stylesheet">
\t
\t <!-- fonts -->
\t <link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
</head>
<body>
\t
\t <div class="contentarea2">
\t
\t \t <div class="container squares">
\t \t \t <div class="row">
\t \t \t \t <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
\t
\t \t \t \t \t <a href="#"><img class="img-responsive fade2" src="img/square1.jpg" alt="client 1"></a>
\t \t \t \t \t
\t \t \t \t \t <div class="overlay-portfolio">
\t \t \t \t \t <h3>Modern</h3>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
\t \t \t \t \t <a href="#"><img class="img-responsive fade2" src="img/square2.jpg" alt="client 1"></a>
\t \t \t \t \t <div class="overlay-portfolio">
\t \t \t \t \t <h3>Contemporary</h3>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
\t \t \t \t \t <a href="#"><img class="img-responsive fade2" src="img/square3.jpg" alt="client 1"></a>
\t \t \t \t \t <div class="overlay-portfolio">
\t \t \t \t \t <h3>Minimalist</h3>
\t \t \t \t \t </div>
\t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
\t \t \t \t \t <a href="#"><img class="img-responsive fade2" src="img/square4.jpg" alt="client 1"></a>
\t \t \t \t \t <div class="overlay-portfolio">
\t \t \t \t \t <h3>Classic</h3>
\t \t \t \t \t </div>
\t \t \t \t
\t \t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div class="optionswrapper">
\t \t \t <div class="option1">
\t \t \t </div>
\t \t \t
\t \t \t <div class="option2">
\t \t \t </div>
\t \t \t </div>
\t \t </div>
\t
\t </div>
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
我不太確定你在做什麼，但是你應該只是修改網格元素作爲最後的手段（而不是使用子元素），並且在所有事物上放置100％的寬度只會令人頭痛。這是一個開始。它應該是什麼樣子？ http://jsfiddle.net/isherwood/mzcqekL0 – isherwood
也許這更接近。 http://jsfiddle.net/isherwood/mzcqekL0/2/ – isherwood
固定Z-索引：http://jsfiddle.net/isherwood/mzcqekL0/3 – isherwood