CSS - Keep text under an image

问题

I'm trying to create a simple gallery of pictures and I was told to use "float: left", but when I do all the text from my footer shoots up to the first image. I've been searching around for about an hour trying to find a fix but I can't find anything. I've tried using margins, border, different aligns and all sorts off different small things but nothing works. Here is the website code:

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

I assume this is a frequent beginner's mistake but I can't find anything that will fix it, thank you to anyone who tries to help.

回答1:

you need to clear any floats. So after the floated elements you can add this class to your footer and to your the parent of your floated divs, #txt1, .clearfix:after:

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

or you can just add a div with clear:both above your include of footer.php:

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

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

回答2:

Floating an element takes it out of the 'flow' of the page. Your footer shoots up because it is taking no notice of floated elements. This is where clear comes in, it specifies whether the element can be next to (or in line with) floated elements. Add clear:both to your footer, and you should get the result you wanted:

#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

来源：https://stackoverflow.com/questions/19958849/css-keep-text-under-an-image

标签

html

css

image

text

move