CSS - 将文本保留在图像下 [英] CSS - Keep text under an image
问题描述
我试图创建一个简单的图片库，我被告知要使用float：left，但是当我做的所有文本从我的脚注射到第一个图像。我一直在寻找大约一个小时试图找到一个修复，但我找不到任何东西。我试过使用边距，边框，不同的对齐方式和所有排序不同的小东西，但没有什么工作。以下是网站代码：
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
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
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
footer.php
<div id="footer">
<p>Mock Website created on 12th November 2013</p>
</div>
</body>
layout.css
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.
推荐答案
您需要清除任何浮动广告。因此，在浮动元素之后，您可以将此类添加到您的页脚和您的浮动div的父元素＃txt1 ， .clearfix：之后：
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;
}
或者你可以添加一个清除的div： .php：
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');
?>
这篇关于CSS - 将文本保留在图像下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
