我正在尝试使用bootstrap实现以下布局。我能够做到这一点,但在小屏幕上出现问题,其中最中间的盒子(最小的一个)不会出现在应该的位置,它会上升。所以想尝试使用bootstrap。enter image description here
答案 0 :(得分:2)
以下应该生成您想要的布局。根据需要添加边框或其他精美样式。
body {
margin: 0;
padding: 0;
}
.top-cover {
width: 100%;
height: 300px;
background: #eee;
}
.main-cover {
width: 90%;
height: 700px;
position: relative;
margin: -60px auto 0;
z-index: 1;
background-color: brown;
}
#dp {
width: 20%;
position: absolute;
left: 50%;
margin: -10% 0 0 -10%;
z-index: 2;
}
.dp-pic {
width: 100%;
}

<div class="top-cover">
</div>
<div class="main-cover">
<div id="dp">
<img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">
</div>
</div>
&#13;
答案 1 :(得分:1)
这个解决方案怎么样。我对您的代码进行了一些更改。
请仔细看看
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0.5px solid black;
}
.top-cover {
width: 100%;
height: 300px;
background-image: url('IMG_0044.JPG');
background-size: cover;
background-position: center;
}
.main-cover {
width: 90%;
position: relative;
height: 700px;
left: 5%;
top: -60px;
z-index: 1;
background-color: brown;
border: solid 5px green;
}
#dp {
width: 20%;
position: absolute;
left: 40%;
top: -10%;
z-index: 2;
display: none;
}
.dp-pic {
width: 20vw;
min-width: 75px;
max-width: 150px;
position: absolute;
left: 40%;
top: -8%;
}
&#13;
<div class="top-cover">
</div>
<div class="main-cover">
<div id="dp"></div>
<img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">
</div>
&#13;