如何在图片div下获取文本div？

Question

I made 3 kinds of div's, 2 on the left side and one on the right side using float. 我使用浮点数制作了3种div，左侧2种，右侧一种。 Now I want automatically that my div text comes under my img div but I cannot get it working with 20 pixels. 现在，我希望我的div文本自动进入我的img div下，但我无法使它使用20像素。 I have looked around for a bit on stackoverflow but couldn't find the right answer, also most posts are 2-3 years old. 我到处都是关于stackoverflow的信息，但是找不到正确的答案，而且大多数帖子都使用了2-3岁。 I was wondering if someone could help me out? 我想知道是否有人可以帮助我？

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

Thanks for the help! 谢谢您的帮助！

Answer 1

Like this? 像这样？

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

Basically I put the two divs you want to appear on the left in a div called #left and the one div you want to appear floated next to it in a div called #right , and then floated those two divs next to each other. 基本上，我将要显示的两个div放在名为#left的div的左侧，而要显示的一个div则漂浮在它的#right的div #right ，然后将这两个div彼此相邻地浮动。 Then the two divs in the #left div will naturally appear one under the other. 然后， #left div中的两个div自然会在另一个下方出现。

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

Answer 2

取消职位：从b1类中移除

Answer 3

Change your CSS to the following: 将您的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;
}

Working DEMO . 工作演示。

Answer 4

Your #content block has a fixed width and the child elements .b1 , .b2 , .b3 all have specific widths and heights. 您的#content块具有固定的宽度，子元素.b1 ， .b2和.b3均具有特定的宽度和高度。 This is a perfect layout for absolute positioning. 这是绝对定位的理想布局。

Try the following: 请尝试以下操作：

 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

Thanks for helping me! 感谢您的帮助！ I found it also just out with a classmate from me =] Marc Audet did get the closed to the answer thanks for it! 我还和我的一个同学一起发现了它=] Marc Audet确实对答案很封闭，谢谢！

My solution HTML: 我的解决方案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>

My solution CSS: 我的解决方案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;
}

Thanks for the help everyone! 感谢大家的帮助！

Greetings, FlatDesigner 问候，FlatDesigner

如何在图片div下获取文本div？

问题描述

5 个解决方案

解决方案1
0 2014-09-22 13:29:42

解决方案2
0 2014-09-22 13:30:04

解决方案3
0 2014-09-22 14:02:55

解决方案4
0 已采纳 2014-09-22 14:08:05

解决方案5
0 2014-09-22 14:09:10

如何在图片div下获取文本div？

问题描述

5 个解决方案

解决方案1 0 2014-09-22 13:29:42

解决方案2 0 2014-09-22 13:30:04

解决方案3 0 2014-09-22 14:02:55

解决方案4 0 已采纳 2014-09-22 14:08:05

解决方案5 0 2014-09-22 14:09:10

解决方案1
0 2014-09-22 13:29:42

解决方案2
0 2014-09-22 13:30:04

解决方案3
0 2014-09-22 14:02:55

解决方案4
0 已采纳 2014-09-22 14:08:05

解决方案5
0 2014-09-22 14:09:10