Как мне получить свой div div под моим изображением div?

Я сделал 3 вида div, 2 на левой стороне и один на правой стороне, используя поплавок. Теперь я хочу автоматически, чтобы мой текст попал под мой img div, но я не могу заставить его работать с 20 пикселями. Я немного оглянулся на stackoverflow, но не смог найти правильный ответ , также большинству сообщений 2-3 года. Мне было интересно, может ли кто-нибудь помочь мне?Как мне получить свой div 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 вы хотите под другим? –

Привет, Кристофер, я добавил его в скрипку, но я добавлю его также в вопросе. – FlatDesigner

use 'position: relative;' to b1, b2 [jsfiddle demo link] (http://jsfiddle.net/v8kfc38h/5/) – Farshad

Ваш #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 рядом друг с другом. Тогда два divs в div #left естественно появятся под другим.

Fiddle: http://jsfiddle.net/v8kfc38h/4/

источник

2014-09-22 13:29:42

Удалить позицию: абсолютная от b1 класса

источник

2014-09-22 13:30:04 joff23

Но чем будет только текст, а не цвет фона. – FlatDesigner

Измените ваш 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 view: http://jsfiddle.net/Lvw6pqzu/ –

Спасибо за помощь мне! Я тоже нашел его со своим одноклассником =] 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 Кроме того, вы должны подумать о том, как использовать figcaption для HTML5 для текста, связанного с изображениями - http://html5doctor.com/the-figure-figcaption-elements/ – jan199674

Как мне получить свой div div под моим изображением div?

ответ

Смежные вопросы