Question

各位CSS大神，图中黄色块怎么上去啊？跟绿色块一行，位置最右边

html:
<div id="content_main2">
<div class="main_title2"></div>
<div class="main2_opt">
<ul class="opt_list">
<li>最新</li>
<li>最热</li>
<li>官方菜单</li></ul>
</div>
</div>
css
#content_main2 {width:990px; margin:0px auto; background:#500BF9（蓝）;}
.main_title2 {width:300px; height:120px; line-height:120px; margin:0px auto; text-align:center; background:#3FFB07（绿）;}
.main2_opt {float:right; background:#E3F806（黄）; height:120px; line-height:120px;}

Answer 1

绿色块是块级元素，它会独占一行，所以黄色块就被它踢到下一行了。

解决办法一是把黄色通过绝对腊哪定位放到蓝色框的最右边：

#content_main2 {POSITION:relative; width:990px; margin:0px auto; background:#500BF9;}

.main_title2 {width:300px; height:120px; line-height:120px; margin:0px auto; text-align:center;  background:#3FFB07;}

.main2_opt {POSITION:absolute; right:0; top:0; background:#E3F806; height:120px; line-height:120px;}

二是把绿色轮行码块也做成浮动元素，通过左边距来居中（注意这时候蓝色框要指定高度带昌，或者在黄色块后面清除浮动）：

#content_main2 {width:990px; height:120px; margin:0px auto; background:#500BF9;}

.main_title2 {float:left; width:300px; height:120px; line-height:120px; margin-left:345px; text-align:center;  background:#3FFB07;}

.main2_opt {float:right; background:#E3F806; height:120px; line-height:120px;}

Answer 2

可以使用绝对定位或相对定位毁晌（中则自己选一个对布局更友好卖余棚的方法）：

.main2_opt{position:absolute; top: 0px; left:???px}
/*绝对定位*/
.main2_opt{position:relative; top: 0px; left:???px}
/*相对定位*/