Сила div на следующую строку

Я пытаюсь заставить div нижнего колонтитула сидеть ниже «главного» div, за исключением того, что он продолжает появляться рядом с ним. Я просто хочу, чтобы он сидел прямо под предыдущим div (не заставлять его снизу), за исключением того, что он всегда сидит ниже заголовка.Сила div на следующую строку

<body> 
    <div class="wrapper"> 
     <div class="header"> 
      Heading 
     </div> 
     <div class="main"> 
      Content 
     </div> 
     <div class="footer">More details on how you can help coming soon.</div> 
    </div> 
</body>

CSS:

body { 
    background-image: url("./../img/bg.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    margin: 0; 
    padding: 0; 
} 

.header{ 
    color: #FFFFFF; 
    font-size: 14vw; 
    text-align: center; 
    font-family: OSWALD; 
    font-style: normal; 
    text-transform: uppercase; 
    font-weight: 700; 
    letter-spacing: 2px; 
    width: 100%; 
    line-height: 1.2em; 
} 

.main{ 
    display: inline-block; 
    width: 300px; 
    height: 380px; 
    overflow: hidden; 
    padding: 19px 22px 7px; 
    color: #fff; 
    font-size: 13px; 
    text-transform: uppercase; 
    font-weight: 700; 
    font-family: "futura-pt", sans-serif; 
    letter-spacing: 2px; 
    line-height: 45px; 
    position: absolute; 
    right: 0px; 
} 

.contact{ 
    border-top: 6px solid #e2d056; 
    border-bottom: 6px solid #e2d056; 
    width: 250px; 
    margin: 25px 0 0; 
    padding: 10px 22px 10px; 
    text-align: center; 
} 

.footer { 
    color: #fff; 
    font-size: 13px; 
    text-transform: uppercase; 
    font-weight: 700; 
    font-family: "futura-pt", sans-serif; 
    letter-spacing: 2px; 
    line-height: 25px; 
    text-align: left; 
    padding-left: 30px; 
}

источник

2015-08-15 GeeJay

Не используйте дисплей: встроенный блок затем. Было бы неплохо, если бы вы могли обрезать свой огромный css. – kornieff

Просто удалите положение свойства main. Это будет работать. – WisdmLabs

-1

Использование .footer { clear: both; }.

источник

2015-08-15 19:43:07

Да, я пробовал, но это не сработало. – GeeJay

Вы можете просто удалить display: inline-block;, так как он не имеет цели.

Если вам все еще нужен display: inline-block;, вы можете использовать .footer { clear: both; } или сделать .main { float: left; clear: both; }.

источник

2015-08-15 19:46:20 Chrillewoodz

Просто измените postion:absolute на position:relative на .main как абсолютный элемент div из потока макета.

.main { 
    position:relative; 
}

Вот jsfiddle с обновленным кодом: https://jsfiddle.net/AndrewL32/ewaLf4ct/

источник

2015-08-15 19:50:07

Сила div на следующую строку

ответ

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