0

我正在尝试创建一个简单的图片库，并被告知使用“float：left”，但是当我从页脚中的所有文本拍摄到第一张图片时。我一直在寻找大约一个小时试图找到修复，但我找不到任何东西。我尝试过使用边距、边框、不同的对齐方式以及各种不同的小东西，但没有任何效果。这是网站代码：

头文件.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>

画廊.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');
?>

页脚.php

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

</body>

布局.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;
}

我认为这是初学者经常犯的错误，但我找不到任何可以解决它的东西，感谢任何试图提供帮助的人。

4

2 回答 2

2

浮动元素会将其从页面的“流程”中移除。您的页脚会弹出，因为它没有注意到浮动元素。这就是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-13T16:22:34.957 回答
1

你需要清除任何浮动。因此，在浮动元素之后，您可以将此类添加到页脚和浮动 div 的父级#txt1，.clearfix:after：

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

或者你可以在你的footer.php包含上方添加一个带有clear:both的div：

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

<?php
include('includes/footer.php');
?>
于 2013-11-13T16:22:45.843 回答