如何在我的圖像div下獲取文本div？

我做了3種div，左邊2個，右邊1個使用float。現在我想自動，我的股利文本屬於我的img div但我無法得到它與20像素的工作。我在環視上找了一下，但找不到的正確答案，大多數帖子都是2-3歲。我想知道有人能幫我嗎？如何在我的圖像div下獲取文本div？

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

感謝您的幫助！

來源

2014-09-22 FlatDesigner

在你的問題，你可以通過他們的階級指的div所以我們知道DIV你想下其他的？ – 2014-09-22 13:23:58

你好，克里斯托弗，我已經把它加入了小提琴中，但我也將其添加到問題中。 – FlatDesigner 2014-09-22 13:24:58

使用'位置：相對;'給b1，b2 [jsfiddle演示鏈接]（http://jsfiddle.net/v8kfc38h/5/） – Farshad 2014-09-22 13:31:36

您的#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>

來源

2014-09-22 14:08:05

是否這樣？

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和一個DIV要出現下一個浮動它在一個名爲#right的div中，然後將這兩個div彼此相鄰。然後#left div中的兩個div自然會出現在另一個下面。

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

來源

2014-09-22 13:29:42

刪除的位置是：絕對從B1類

來源

2014-09-22 13:30:04 joff23

但是，只有文字會下來，而不是背景顏色。 – FlatDesigner 2014-09-22 13:33:40

改變你的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。

來源

2014-09-22 14:02:55

FIDDLE視圖：http://jsfiddle.net/Lvw6pqzu/ – 2014-09-22 14:15:28

感謝您幫助我！我發現它也只是與我的一個同學=] 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

來源

2014-09-22 14:09:10 FlatDesigner

你不能把標題放在段落內 - http://stackoverflow.com/questions/15656785/should-a-heading-be-inside-or-outside-ap 除此之外，您應該考慮使用HTML5的figcaption來處理與圖片相關的文字 - http://html5doctor.com/the-figure-figcaption-elements/ – jan199674 2014-09-22 14:13:23

如何在我的圖像div下獲取文本div？

回答

相關問題