Question

我正在尝试使用bootstrap实现以下布局。我能够做到这一点，但在小屏幕上出现问题，其中最中间的盒子（最小的一个）不会出现在应该的位置，它会上升。所以想尝试使用bootstrap。enter image description here

Answer 1

以下应该生成您想要的布局。根据需要添加边框或其他精美样式。

＆＃13;

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%;
}

＆＃13;

<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;

Answer 2

这个解决方案怎么样。我对您的代码进行了一些更改。

请仔细看看

DEMO

＆＃13;

* {
    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;

bootstrap使div重叠

2 个答案: