我使用 float 制作了 3 种 div，2 种在左侧，一种在右侧。现在我希望我的 div 文本 自动出现在我的 img div 下，但我无法让它使用 20 像素。我在 stackoverflow 上四处看了看，但找不到 正确答案，而且大多数帖子都是 2-3 岁。我想知道是否有人可以帮助我？
HTML:
<body>
<div id="content">
<div class="b1"> </div>
<div class="b2"> </div>
<div class="b3"><p><h3>Wildlife</h3><br>Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p></div>
</body>
CSS:
body {
background-color: #efede7;
line-height: 1.5;
}
#content{
background-color: #fff;
width: 962px;
margin: 0 auto;
}
.b1 { /*img div*/
background-color: #34495e;
height: 290px;
width: 470px;
float: left;
position: absolute;
}
.b2 { /*big img div*/
background-color: blue;
height: 600px;
width: 470px;
float: right;
}
.b3 { /* text div*/
background-color: #14495e;
color: #6d6f6f;
margin: 0;
height: 290px;
width: 470px;
padding: 4% 6% 0;
font-size: 1.0625em;
font-family: 'ProximaNova', sans-serif;
}
h3 {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #545454;
font-size: 1.25em;
letter-spacing: .05em;
text-transform: uppercase;
}
感谢您的帮助!
最佳答案
您的 #content block 具有固定宽度，子元素 .b1、.b2、.b3 都有特定的宽度和高度。这是绝对定位的完美布局。
尝试以下操作:
body {
background-color: #efede7;
line-height: 1.5;
}
#content{
background-color: #fff;
width: 962px;
margin: 0 auto;
position: relative;
}
.b1 { /*img div*/
background-color: #34495e;
height: 290px;
width: 470px;
position: absolute;
top: 0;
left: 0;
}
.b2 { /*big img div*/
background-color: blue;
height: 600px;
width: 470px;
position: absolute;
top: 0;
right: 0;
}
.b3 { /* text div*/
background-color: #14495e;
color: #6d6f6f;
margin: 0;
height: 290px;
width: 470px;
padding: 20px;
font-size: 1.0625em;
font-family: 'ProximaNova', sans-serif;
position: absolute;
top: 310px;
left: 0;
box-sizing: border-box;
}
h3 {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #545454;
font-size: 1.25em;
letter-spacing: .05em;
text-transform: uppercase;
}<div id="content">
<div class="b1"> </div>
<div class="b2"> </div>
<div class="b3"><p><h3>Wildlife</h3><br>Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p></div>
</div>关于html - 如何在图像 div 下获取文本 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25975200/