Question

见下图：

Example

现在，我左侧有.tweet_list，右侧有#tweets_right，但我希望#tweets_right与#tweet_list一起坐在顶部。

两者的CSS如下：

#tweet_list{
    width: 500px;
    height: 187px;
    background: url(../images/tweet_bg.gif) no-repeat;
    margin: 30px 0 0 0;
    padding: 5px 0 0 60px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    float: left;
}

#tweets_right{
    width: 200px;
    float: right;
    color: #818179;
    border: 1px solid #333;
    margin-right: 60px;
}

我可以使用margin-top: -100px;但肯定这不是最好的方法。我是新手，请有人帮忙吗？

由于

Answer 1

有关垂直对齐的更多信息，请访问：w3schools

Answer 2

发生此问题是因为您的第一个div是一个很大的宽度。它超出了浏览器的宽度，因此下一个div被强制向下。尝试并最大化您的浏览器窗口，看看会发生什么。

适合我：

<html>
<head>
<style type="text/css">
/*Setting css properties for body tag*/
body
{

    margin: 0;
    padding: 0;
    color: #000;

}



#main_container {
    width: 960px;
    background: #FFF;
    margin: 0 auto; /*centers the elements*/
}
#tweet_list{
    width: 800px;
    height: 187px;
    background: url(../images/tweet_bg.gif) no-repeat;

    font-family: 'FujitsuSansRegular', Arial, Helvetica, sans-serif;
    font-size: 12px;

 white-space:nowrap;
}

#tweets_right{
    width: 200px;
    float: right;
    color: #818179;
    border: 1px solid #333;
    margin-right: 60px;
    top:0px;
}

</style>
</head>
<body>


<div id="main_container">
<div id="tweets_right">Tweets Right</div>
<div id="tweet_list">Tweet_List</div>

</div>
</body>
</html>

Answer 3

有两种方法：

<强>首先

始终分配div Width:50%;

的宽度

有了这个，每个div都将永远只有无论包装div是什么的50％ width设置为：

参考： http://css-tricks.com/forums/discussion/11273/float-question/p1

第二:(你可以称之为技巧）

按照Greg发布的链接进行操作 comment 一个有效的解决方案基本上放了你先浮动元素 HTML

CSS定位错误

3 个答案: