我有一些布局问题。
如果你看at the fiddle here ，有两个容器，contentAbout 和contentPortfolio。我的问题是我无法在彼此之间正确设置那些 div。之间总是有一个空格。
也许你可以给我一些提示，让这个工作正常进行。
这是我的html
<div class="content">
<div class="contentAbout">
<p>TEXT</p>
</div>
<div class="contentPortfolio">
<p>TEXT 2</p>
</div>
</div>
这是我的CSS
.image {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(35, 35, 35, .8)),
url('../img/header-bg.jpg'),
url('http://lorempixel.com/g/1200/1200');
background-size: cover;
background-repeat: no-repeat;
}
.image:after {
background: url('../img/bg-overlay.png') repeat;
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
opacity: 0.7;
z-index: 1;
}
.content {
position: absolute;
top: 100%;
width: 100%;
height: 100%;
background: rgb(25, 25, 25);
border-top: 1px solid rgb(0, 0, 0);
}
.contentAbout {
position: absolute;
width: 100%;
background: rgb(255, 100, 50);
}
.contentPortfolio {
position: absolute;
width: 100%;
background: rgb(20, 255, 25);
}
最佳答案
最终布局应该类似于 this ？
html,body {
height: 100%;
padding: 0;
margin: 0;
}
header {
position:fixed;
margin: 0;
width: 100%;
min-height: 12%;
background-color: #000;
}
.image {
background: #4ABCDD url('http://guardsmanbob.com/data/Wallpapers/wallpaper-1162819.jpg');
background-size: cover;
overflow: hidden;
width: 100%;
height: 100%;
min-height: 100%;
margin: 0;
}
.content {
text-align: center;
width: 100%;
min-height: 22%;
margin: 0;
}
.about {
background: red;
}
.portfolio{
background: yellow;
}
p {
display: inline;
}<body>
<header>
</header>
<div class='image'>
</div>
<div class ='content about'>
<p>TEXT1</p>
</div>
<div class ='content portfolio'>
<p>TEXT2</p>
</div>
<footer>
</footer>
</body> 关于html - 将两个容器相互放置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30390607/