Question

我正在尝试为我们公司的网站创建一个简单的“关于我们”页面，我在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上看起来很奇怪，但它现在看起来像这样： enter image description here

Answer 1

我试着为你简化一些事情。我想出的相关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我还为遗留（读取＆lt; IE9）浏览器添加了一个后备，因此它们将显示左侧的所有图片而不是交替显示。

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

此方法的优点是您可以添加无限量的人或更改其顺序，而无需添加或更改其他CSS行......

Answer 2

清除行之间的浮动。

--Pic-- --Text-

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

--Text-- --Pic-

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

--Pic-- --Text-

CSS

.clearfix {
    clear: both;
}

这将停止彼此重叠的行，如图所示。

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

Answer 3

将以下代码添加到CSS中：

#content > div { clear:both; }

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

如何将三张图片与相应的文本对齐，以便它们从左向右交替？

3 个答案: