Question

这很奇怪。我有一个“包装器”，有三列，如下所示： http://d.imagehost.org/view/0543/cssproblem

第一列有图片，第二列有文字，第三列有三个链接。如果第三个块只有文本而不是链接（请参见链接图片的顶部），但是当我从文本中创建链接时，文本不再并排（请参见链接图片的底部），它可以正常工作。

我无法理解代码有什么问题。即使是链接，第三栏中的文字如何并排保留？

的CSS：

.wrapper{
margin-left: 45px;
margin-bottom: 4px;
width: 466px;
height: 22px;
}

.first{
width: 22px;
float: left;
}

.second{
width: 266px;
float: left;
}

.third{
width: 178px;
float: right;
}

p.text1 {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1.2em;
text-align: left;
margin-left: 12px;
margin-top: 3px;
}

p.text2 {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-align: right;
}

a.opt { 
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}

a.opt:visited { 
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}

a.opt:active { 
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}

a.opt:hover { 
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: underline;
}

HTML：

<div class="wrapper">
<div class="first><img src="image.gif" /> </div>
<div class="second"><p class="text1">Some text here</p></div>
<div class="third"><p class="text2"><a class="opt" href="http://">LINK 1</a> | <a class="opt" href="http://">LINK 2</a> | <a class="opt" href="http://">LINK 3</a></p></div>
</div>

Answer 1

我的猜测是，float: right课程中的.third声明。首先尝试将CSS调整为：

.wrapper{
margin-left: 45px;
margin-bottom: 4px;
overflow: hidden;
width: 466px;
height: 22px;
}

.first{
width: 22px;
float: left;
}

.second{
width: 266px;
float: left;
}

.third{
width: auto;
overflow: hidden;
}

这消除了对右浮动div的需要。这应该有希望清理足够的东西。如果没有，我会修改我的答案。

三列和链接

1 个答案: