Question

我使用float制作了3种div，2在左侧，1在右侧。现在我想自动地将 div文本置于我的 img div 之下，但我无法使用20像素。我已经四处查看了stackoverflow，但无法找到正确答案，大多数帖子都是2-3岁。我想知道是否有人可以帮助我？

Visit problem

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

感谢您的帮助！

Answer 1

喜欢这个吗？

HTML

<body>
    <div id="content">
        <div id="left">
            <div class="b1"> </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>
        <div id="right">
            <div class="b2"> </div>
        </div>
</body>

CSS

body {
    background-color: #efede7;
    line-height: 1.5;
}

#content{
    background-color: #fff;
    width: 962px;
    margin: 0 auto; 
}

#left, #right {
    float: left;
}

.b1 { /*img div*/
    background-color: #34495e;
    height: 290px;
    width: 470px;
}

.b2 { /*big img div*/
    background-color: blue;
    height: 600px;
    width: 470px;
}

.b3 { /* text div*/
    background-color: #14495e;
    color: #6d6f6f;
    margin: 0;
    height: 290px;
    width: 471px;
    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;
}

基本上我把你想要出现的两个div放在一个名为#left的div中，并且想要在一个名为#right的div中浮动的一个div然后浮动那两个div彼此相邻。那么#left div中的两个div自然会出现在另一个下面。

小提琴：http://jsfiddle.net/v8kfc38h/4/

Answer 2

从b1类

中删除位置：绝对值

Answer 3

将您的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;  removed, not required*/
}
.b2 {
    /*big img div*/
    background-color: blue;
    height: 600px;
    width: 470px;
    float: right;
}
.b3 {
    /* text div*/
    background-color: #14495e;
    color: #6d6f6f;
    height: 290px;
    width: 355px; /*changed, because padding adds up to form total width of 470px*/
    padding: 4% 6% 0;
    font-size: 1.0625em;
    font-family:'ProximaNova', sans-serif;
    float:left; /*added*/
}
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;
}

工作DEMO。

Answer 4

您的#content块具有固定宽度，子元素.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>

Answer 5

谢谢你的帮助！我发现它也只是和我的一个同学=] Marc Audet确实得到了答案，谢谢你！

我的解决方案HTML：

<body>
    <div id="content">
        <div class="b1"> </div>
        <div class="b2"> </div>
        <div class="b3"><p><h3>Wildlife</h3>
            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 {
    background-color: #34495e;
    height: 290px;
    width: 470px;
    float: left;
}

.b2 {
    background-color: blue;
    height: 600px;
    width: 470px;
    float: right;
}

.b3 {
    background-color: #fff;
    color: #6d6f6f;
    margin-top: 20px;
    height: 250px;
    width: 430px;
    padding: 20px;
    float: left;
    font-size: 1.0625em;
    font-family: 'ProximaNova', sans-serif;
    box-shadow: 1px 1px 1px rgba(0,0,0,.1);
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #545454;
    font-size: 1.25em;
    letter-spacing: .05em;
    text-transform: uppercase;
}

感谢大家的帮助！

问候， FlatDesigner

如何在我的图像div下获取文本div？

5 个答案: