CSS - Сохраняйте текст под изображением

Я пытаюсь создать простую галерею изображений, и мне сказали использовать «float: left», но когда я делаю весь текст с моего нижнего колонтитула до первого изображения. Я искал около часа, пытаясь найти исправление, но ничего не могу найти. Я пробовал использовать поля, границы, разные выравнивания и всевозможные разные мелочи, но ничего не работает. Вот код сайта:CSS - Сохраняйте текст под изображением

header.php

<!DOCTYPE html> 
<html> 

<head> 
    <style type="text/css" media="all">@import "./includes/layout.css";</style> 
</head> 
    <body> 
     <a href="index.html" class="logo"> <img src="includes/images/mockwebsitelogo.png" alt="Logo" width="427" height="172" /></a> 

     <div id="nav"> 
      <a href=index.php class="navBarLink">Home</a> 
      <a href=about.php class="navBarLink">About</a> 
      <a href=gallery.php class="navBarLink">Gallery</a> 
      <a href=programs.php class="navBarLink">Programs</a>  
     </div>

gallery.php

<?php 
include('includes/header.php'); 
?> 
<div id="txt1"> 
    <h1>Gallery</h1> 
    <p>This is the gallery. Enter pictures or screenshots for the user to view</p>  

    <p class="image"><a href="includes/images/mwt.png"> 
     <img src="includes/images/mwt.png" alt="tst" title="tst" width="175" height="175" /></a></p> 
    <p class="image"><a href="includes/images/mwt.png"> 
     <img src="includes/images/mwt.png" alt="tst" title="tst" width="175" height="175" /></a></p> 
    <p class="image"><a href="includes/images/mwt.png"> 
     <img src="includes/images/mwt.png" alt="tst" title="tst" width="175" height="175" /></a></p> 
    <p class="image"><a href="includes/images/mwt.png"> 
     <img src="includes/images/mwt.png" alt="tst" title="tst" width="175" height="175" /></a></p> 
    <p class="image"><a href="includes/images/mwt.png"> 
     <img src="includes/images/mwt.png" alt="tst" title="tst" width="175" height="175" /></a></p> 
</div> 

<?php 
include('includes/footer.php'); 
?>

footer.php

<div id="footer"> 
    <p>Mock Website created on 12th November 2013</p> 
</div> 

</body>

layout.css

body 
{ 
background-color: #e1e1e1; 
background-image:url('/includes/images/mwbb.png'); 
background-repeat: no-repeat;  
background-position: 50%; 
} 

#nav 
{ 
border: 1px solid; 
border-radius: 25px; 
border-color: #e1e1e1; 
background-color: #e1e1e1; 
border-color: #000; 
margin-left: auto; 
margin-right: auto; 
text-align: center; 
width: 850px; 
} 

#footer 
{ 
border-top: 1px solid; 
margin-left: auto; 
margin-right: auto; 
width: 700px; 
padding-top: 10px; 
padding-bottom: 10px; 
text-align: center; 
white-space: nowrap; 
} 

#txt1 
{ 
width: 750px; 
margin-left: auto; 
margin-right: auto; 
} 

.navBarLink 
{ 
margin-left: 50px; 
margin-right: 50px; 
color: #000; 
text-decoration: none; 
} 

.navBarLink:hover 
{ 
color: #878787; 
} 

.logo 
{ 
display: block; 
text-align: center; 
} 

.image 
{ 
margin: 5px 5px 5px 5px; 
border: 1px solid #000; 
padding: 5px 5px 5px 5px; 
width: 175px; 
height: 175px; 
text-align: center; 
float: left; 
background-color: #323232; 
display: inline; 
} 

.image:hover 
{ 
background-color: #4d4d4d; 
}

Я предполагаю, что это частая ошибка новичка, но я не могу найти ничего, что исправит, спасибо всем, кто пытается помочь.

источник

2013-11-13 user1009573

если вы используете поплавок, вам нужно добавить его на все дивы иначе один DIV вы используете поплавок на будет первым вверх и влево – Keith

вам нужно очистить любые поплавки. Таким образом, после того, как плавали элементы, которые вы можете добавить этот класс в сноске и к вашему родителю ваших плавали дивы, # txt1, .clearfix: после:

.clearfix:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
}

или вы можете просто добавить DIV с ясно: как выше, включаемых в footer.php:

<div style="clear:both;"></div> 

<?php 
include('includes/footer.php'); 
?>

источник

2013-11-13 16:22:45

Плавающий элемент выводит его из «потока» страницы. Ваш нижний колонтитул поднимается, потому что он не замечает плавающих элементов. Здесь clear, он указывает, может ли элемент быть рядом с (или в соответствии с) плавающими элементами. Добавить clear:both в футере, и вы должны получить результат, который вы хотели:

#footer { 
    border-top: 1px solid; 
    margin-left: auto; 
    margin-right: auto; 
    width: 700px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    text-align: center; 
    white-space: nowrap; 
    clear:both; 
}

JSFiddle

источник

2013-11-13 16:22:34 George

CSS - Сохраняйте текст под изображением

ответ

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