Сделать нижний колонтитул внизу

Я думаю, что мое кодирование верное, но я все еще не могу поместить нижний колонтитул в нижнюю часть страницы, и мне действительно нужно это сделать.Сделать нижний колонтитул внизу

Нижний колонтитул на результат появляется прямо под заголовком, который раздражает, так как я хочу, чтобы он попал в мой главный div, который находится в моем body.

Спасибо. :)

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Gallery</title> 
     <link type="text/css" rel="stylesheet" href="mobile.css"/> 
    </head> 

    <body> 
     <div id="header"> 
      <div id="companyname">Shutter Up Photography</div> 
      <div id="nav"> 
       <ul> 
        <li><a href="contactus.html">Contact Us</a></li> 
        <li><a href="experience.html">Experience</a></li> 
        <li><a href="offers.html">Offers</a></li> 
        <li><a href="gallery.html">Gallery</a></li> 
        <li><a href="location.html">Location</a></li> 
        <li><a href="aboutus.html">About Us</a></li> 
        <li><a href="home.html">Home</a></li> 
       </ul> 
      </div> 
     </div> 

     <div id="main"> 
      <div id="content"> 
       <div class="img"> 
        <img src="img_model.jpg"/> 
        <div class="desc">Model Shot</div> 
       </div> 

       <div class="img"> 
        <img src="img_classy.jpg"/> 
        <div class="desc">A classy family shot</div> 
       </div> 

       <div class="img"> 
        <img src="img_father.jpg"/> 
        <div class="desc">A father and his boys</div> 
       </div> 

       <div class="img"> 
        <img src="img_wedding.jpg"/> 
        <div class="desc">Timeless Wedding Shot</div> 
       </div> 

       <div class="img"> 
        <img src="img_mother.jpg"/> 
        <div class="desc">A mother and her children</div> 
       </div> 

       <div class="img"> 
        <img src="img_kid.jpg"/> 
        <div class="desc">Imaginative Kid</div> 
       </div> 
      </div> 
     </div> 

     <div id="footer"> 
      <div id="companyname">Shutter Up Photography</div> 
     </div> 
    </body> 
</html>

This is the result from my coding, I've tried to put the css gallery into the main div, but won't work

This is my css code for it

источник

2016-05-27 Anonymous

Пожалуйста, добавьте ваш CSS как код (не изображение) - вы можете редактировать свой вопрос и добавить еще один 'code' блок – ochi

Попробуйте раскладывать регионы вашего страницу с использованием flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Raffael

Пожалуйста, добавьте свой код CSS в сообщение, а не только ссылку. –

его потому, что Ваши изображения плавали, который берет их из потока страницы.

Попробуйте

div div div.img { 
    margin: 5px; 
    border: 2px solid blue; 
    display: inline-block; 
    width: 400px; 
}

Удаляя поплавок и замены встраиваемого блока, который вы держите элементы в потоке страницы.

EDIT -

HTML -

<div class="img"> 
    <img/> 

</div><div class="img"> 
    <img/> 

</div><div class="img"> 
    <img/> 

</div>

Если вы решили использовать встроенный блок, слой ваш HTML, как это, как встроенный блок-элементы учитывают пробелы между элементами.

**/** EDIT

Или, если вы хотите сохранить поплавок, создать класс clearfix и прикрепить его к родителю

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

EDIT -

<div id="content" class="clearfix"> 
    <!-- your floated divs here --> 
</div>

источник

2016-05-27 00:22:09 Mark

Спасибо, Марк попробует. –

Эй, Марк, даже если бы я сделал элемент встроенного блока, чтобы поместить его с потоком страницы, как бы я мог заставить его выглядеть как галерея 3x2, как раньше? –

Пожалуйста, проверьте мои изменения :) @ M.Park – Mark

Add обертка со следующими атрибутами CSS в качестве кода ниже. Это должно сделать трюк:

html, 
 
body { 
 
    height: 100%; 
 
} 
 
#wrap { 
 
    min-height: 100%; 
 
} 
 
#main { 
 
    overflow: auto; 
 
    padding-bottom: 150px; 
 
    /* must be same height as the footer */ 
 
} 
 
#footer { 
 
    position: relative; 
 
    margin-top: -150px; 
 
    /* negative value of footer height */ 
 
    height: 150px; 
 
    border-bottom-style: solid; 
 
    clear: both; 
 
    background-color: #006BFE; 
 
    border: 2px solid red; 
 
    /* remove border, showns for illustration purposes only */ 
 
} 
 
div.img { 
 
    margin: 5px; 
 
    display: inline-block; 
 
    width: 400px; 
 
    border: 1px solid blue; 
 
    padding: 10px; 
 
} 
 
div.img img { 
 
    width: 100%; 
 
    height: auto; 
 
    border: 2px solid #006bFE; 
 

 
} 
 
div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 
.somelist { 
 
    list-style-type: square; 
 
    list-style-position: inside; 
 
    float: none; 
 
    line-height: 1.5em; 
 
    background-color: #93dbfe; 
 
}

<div id="wrap"> 
 
    <div id="header"> 
 
    <div id="companyname">Shutter Up Photography</div> 
 
    <div id="nav"> 
 
     <ul> 
 
     <li><a href="contactus.html">Contact Us</a> 
 
     </li> 
 
     <li><a href="experience.html">Experience</a> 
 
     </li> 
 
     <li><a href="offers.html">Offers</a> 
 
     </li> 
 
     <li><a href="gallery.html">Gallery</a> 
 
     </li> 
 
     <li><a href="location.html">Location</a> 
 
     </li> 
 
     <li><a href="aboutus.html">About Us</a> 
 
     </li> 
 
     <li><a href="home.html">Home</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <div id="main"> 
 
    <div id="content"> 
 
     <div class="img"> 
 
     <img src="http://lorempixel.com/300/300/people" /> 
 
     <div class="desc">Model Shot</div> 
 
     </div> 
 

 
     <div class="img"> 
 
     <img src="http://lorempixel.com/300/300/people" /> 
 
     <div class="desc">A classy family shot</div> 
 
     </div> 
 

 
     <div class="img"> 
 
     <img src="http://lorempixel.com/300/300/people" /> 
 
     <div class="desc">A father and his boys</div> 
 
     </div> 
 

 
     <div class="img"> 
 
     <img src="http://lorempixel.com/300/300/people" /> 
 
     <div class="desc">Timeless Wedding Shot</div> 
 
     </div> 
 

 
     <div class="img"> 
 
     <img src="http://lorempixel.com/300/300/people" /> 
 
     <div class="desc">A mother and her children</div> 
 
     </div> 
 

 
     <div class="img"> 
 
     <img src="http://lorempixel.com/300/300/people" /> 
 
     <div class="desc">Imaginative Kid</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div id="footer"> 
 
    <div id="companyname">Shutter Up Photography</div> 
 
</div>

источник

2016-05-27 00:26:12 ochi

ответ

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