Question

This is weird. I have a "wrapper" with three columns like this: http://d.imagehost.org/view/0543/cssproblem

第一栏有照片,第二栏有文字,第三栏有三个链接。如果第三组只是案文,而不是链接(见相关照片的顶端),但当我与案文脱节时,案文已不再是一边(见相关情况的最底层)。

我只能理解一下该法典有什么错误。第3栏中的案文即使有链接,也怎么能够毗邻相处?

c :

.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: 右在<条码>上的声明。开始调整社会保障局,以考虑这一点:

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

这消除了权利分散的必要性。这有望使事情变得足够干净。否则,我会修改我的回答。

友情链接