0

我的页面上有三列，左、中和右。左边和中间的在浏览器中定位很好。但是最右边的位置不正确，如果我给它相同的 margin-top:30px （就像其他 div 一样）它会沿着屏幕向下移动吗？

感谢您的任何建议

CSS：

    #firstColumn
{
    position:relative;
    margin-left:20px;
    width:200px;
    margin-top:30px;
    float:left;

}

#secondColumn
{
    position:relative;
    margin-left:315px;
    width:200px;
    margin-top:30px;
    float:none;

}

#thirdColumn
{
    position:relative;
    margin-left:650px;
    width:200px;
    margin-top:-30px;
    float:none;

}

html:

<div id="firstColumn">
<p style="font-size:18px; color:Gray;"><b>Lorem ipsum</b></p>
<hr style="background-color:Gray; border:0.5px solid Gray" />
<p style="color:Blue; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div id="secondColumn" >
<p style="font-size:18px; color:Gray;"><b>Lorem ipsum</b></p>
<hr style="background-color:Gray; border:0.5px solid Gray" />
<p style="color:Blue; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div id="thirdColumn" >
<p style="font-size:18px; color:Gray;"><b>Lorem ipsum</b></p>
<hr style="background-color:Gray; border:0.5px solid Gray" />
<p style="color:Blue; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
4

3 回答 3

0

找出错误：margin-top:-30px;在#thirdColumnCSS 中。

编辑：使用position:absolute;

编辑#2：

#firstColumn {
    position:absolute;
    margin-left:20px;
    width:200px;
    margin-top:30px;
    float:left;
}

#secondColumn {
    position:absolute;
    margin-left:315px;
    width:200px;
    margin-top:30px;
    float:none;
}

#thirdColumn {
    position:absolute;
    margin-left:650px;
    width:200px;
    margin-top:30px;
    float:none;
}

<div id="firstColumn"></div>
<div id="secondColumn" ></div>
<div id="thirdColumn" ></div>
于 2013-05-19T21:11:53.457 回答
0

是的，我现在已经解决了，我最后所做的是将每一列包装在自己的 div 中并定位它。谢谢大家的建议和建议！

于 2013-05-19T21:57:31.290 回答
0

为了轻松获得布局，您需要像下面这样的结构，这很容易做到这一点；

<div id="container">
    <div class="entry"><!-- Your stuff --></div>
    <div class="entry"><!-- Your stuff --></div>
    <div class="entry"><!-- Your stuff --></div>
</div>

CSS

#container {width: 600px;} /* The overall width you want */
#container .entry {width: 190px; float: left; margin: 0 5px;}

一个工作示例http://jsfiddle.net/CarlG/dpM2T/

于 2013-05-19T21:24:41.483 回答