1

我正在尝试为我们公司的网站创建一个简单的“关于我们”页面，但我在 CSS 和 HTML 的对齐方面遇到了麻烦。基本思想是这样的：

--Pic-- --Text-

--Text-- --Pic-

--Pic-- --Text-

这是我创建的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="baseStyle.css">
<link rel="stylesheet" type="text/css" href="aboutUsStyles.css">
</head>

<body>
<div id="wrap">
    <h1>who are we?</h1>

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="ourProducts.html">Our Products</a></li>
<li><a href="FAQ.html">FAQs</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

<div id="content">

<div><p id="andypic">
    <img src="http://img40.imageshack.us/img40/7106/testjdc.jpg"></p>
<p id="andyPicInfo">This is a test
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg   
</p>
</div>

<div><p id="evpic">
<img src="http://img40.imageshack.us/img40/7106/testjdc.jpg"></p>
<p id="andyPicInfo">This is a test
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg   
</p>
</div>    

<div><p id="tannerpic">
    <img src="http://img40.imageshack.us/img40/7106/testjdc.jpg"></p>
<p id="andyPicInfo">This is a test
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg
testgfgfdfgdfgggggggggggggggggggggggggggggggg   
</p>
</div>
</div>

</div>

</body>
</html>

这是两个 CSS 文件：

第一个文件：

#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc; }

#nav li {
float: left; }

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }

#nav li a:hover {
color: #c00;
background-color: #fff; }

body {
background-color: #555; 
font: small/1.3 Arial, Helvetica, sans-serif; }

#wrap {
width: 750px;
height: 900px;
margin: 0 auto;
background-color: #fff; }

h1 {
text-align: center;
font-size: 1.5em;
padding: 1em 8px;
color: #123;
background-color: #069;
margin: 0; }

#content {
padding: 0 30px 30px; }

#copyright { 
text-align: center;
font-size: .75em; }

第二个文件：

#andypic{
float: left;
height: 240px;
width: 320px;
}

#evpic{
float: right;
height: 240px;
width: 320px;
}
#tannerpic{
float: left;
height: 240px;
width: 320px;
}

我现在所拥有的几乎没问题，但是这些行都是错误的，并且文本没有正确匹配。

现在我知道这在 SO 上看起来很奇怪，但现在看起来像这样： 在此处输入图像描述

4

3 回答 3

2

我试图为你简化一些事情。我想出的相关CSS是这样的：

.person {
    clear: both;  /* make every new person start beneath the previous */
    padding-top: 15px;
}

.person img {
    display: block;
    height: 240px;
    width: 320px;
}

/* fallback for browser that don't support the nth-child */
.person img {
    float: right;
    padding-left: 15px;
}

/* float odd pictures to the left */
.person:nth-child(2n+1) img {
    float: left;
    padding: 0 15px 0 0;
}

/* float even pictures to the right */
.person:nth-child(2n) img {
    float: right;
    padding: 0 0 0 15px;
}

要查看它的实际效果：http: //jsfiddle.net/eYrNY/

请注意，这使用 CSS3 nth-child 选择器。对于浏览器支持，请查看：https ://developer.mozilla.org/en-US/docs/CSS/:nth-child 我还为旧版（阅读 <IE9）浏览器添加了后备，因此它们将显示所有图片都在左边，而不是交替它们。

请注意，我还对 HTML 进行了一些更改：
- 我删除<p>了图像周围的标签。语义不正确且没有必要。只需将您的图像设置为显示块。
- 我从人员信息和图像包装器中删除了 id（如果您在其他地方需要它们，您可以将它们添加回来，但在我的示例中不再需要它们），并为每个包装 div 添加了一个“人”类人。

这种方法的优点是您可以添加无限数量的人员，或更改他们的顺序，而无需添加或更改另一行 CSS...

于 2013-04-25T20:56:04.363 回答
0

清除行之间的浮动。

--Pic-- --Text-

<div class="clearfix"></div>

--Text-- --Pic-

<div class="clearfix"></div>

--Pic-- --Text-

CSS

.clearfix {
    clear: both;
}

这将停止在您的图片中相互重叠的行。

文本周围的一些填充也会有帮助

于 2013-04-25T20:43:01.380 回答
0

将以下代码添加到您的 CSS 中：

#content > div { clear:both; }

基本上，浮动元素需要通过使用 clear 来“中和”，这样它就不会重叠/弄乱其他元素。顺便说一句，这个答案不需要额外的 html 代码

于 2013-04-25T20:43:18.193 回答