CSS放置位置不正确

问题描述

| 见下图：现在，我在左边有.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;
}

我可以用5英镑，但这肯定不是最好的方法。我对此很陌生，有人可以帮忙吗？谢谢谢谢

解决方法

发生此问题的原因是您的第一个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>

, 有关垂直对齐的更多信息，请参见：w3schools , 有两种方法：第一：总是分配两个div的宽度Width:50%; 有了这个，每个div永远只会包裹单位的50％宽度设置为：参考：http://css-tricks.com/forums/discussion/11273/float-question/p1 第二：（你可以打电话给把戏）跟随Greg发表在评论一个可行的解决方案。基本上放您在第一个浮动元素 html。

不正确不正确位置位置放置