css の次のレイアウトに問題があります。下の画像からわかるように、右端の 2 つのフローティング要素の間に大きなスペースがあります。
そして、私はそれらを次のように並べようとしています
「サイドバー 2」を適切な場所に引っ張るために負のマージンを使用したくなく、「マグ リンク」を 2 番目のサイドバーから分離する必要があります。
ありがとう
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wraper clearfix">
<div class="container clearfix">
<header>header</header>
<div class="carousel">carousel</div>
<div class="posts">posts
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
<div class="post">Post</div>
</div>
<div class="sidebar1">sidebar1</div>
<div class="mag-link">mag link</div>
<div class="sidebar2">sidebar2</div>
</div><!-- container -->
<footer class="clearfix">footer</footer>
</div><!-- wraper -->
</body>
</html>
CSS
.wraper {
background-color: rgba(254,139,206,0.27);
width: 100%;
position: absolute;
margin: 0;
padding: 0;
}
.container {
background-color: rgba(253,184,65,0.27);
width: 1040px;
margin: 0 auto;
padding: 0;
}
header {
background-color: rgba(198,247,73,0.27);
margin: 0 0 16px 0;
padding: 0 16px 16px;
height: 292px;
}
.carousel {
background-color: rgba(96,250,193,0.27);
margin: 0 8px 16px 0;
height: 240px;
width: 720px;
display: inline-block;
overflow: hidden;
float: left;
}
.posts {/* page content */
background-color: rgba(94,93,250,0.27);
width: 512px;
float: left;
display: inline-block;
padding: 0;
margin: 0 8px 16px 0;
}
.post {
width: 290px;
height:200px;
}
.sidebar1 {
background-color: rgba(184,88,250,0.27);
display: inline-block;
padding: 0;
margin: 0 8px 16px 8px;
float: left;
position: relative;
width: 208px;
height:800px;
}
.mag-link {
background-color: #fd9e90;
width: 240px;
height: 200px;
margin: 0 0 16px 8px;
float: left;
position: relative;
bottom: 389px;
display: inline-block;
}
.sidebar2 {
background-color: rgba(251,244,57,0.27);
float: left;
width: 240px;
height:1100px;
margin: 0 0 16px 8px;
display: inline-block;
}
footer {
width: 100%;
background: #fd9e10;
height: 312px;
float: left;
}
.clearfix {
zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after {
clear: both;}