用兩個右側花車在一個div中居中div

Question

我在這裏有一個小問題。我想以紅色div爲中心，並將兩個綠色div分配到右側。兩個右邊的div似乎下降了？

http://jsbin.com/ewihuh/1/edit

HTML

<div class="headertop"> 
<div class="centerblock">Centered</div> 
<div class="right1">right 1</div> 
<div class="right2">right 2</div> 
</div> 

CSS

.headertop { 
width:100%; 
height:30px; 
background:black; 
} 

.centerblock { 
color:white; 
text-align:center; 
background:red; 
width: 200px; 
margin: 0px auto; 
} 

.right1, .right2 { 
color:white; 
float:right; 
width:100px; 
background:green; 
} 

Answer 1

Live Demo

嗨改變現在到your html code有些變化css

的CSS

.headertop { 
    width:100%; 
    background:black; 
    text-align:center; 
} 
.centerblock { 
    color:white; 
    text-align:center; 
    background:red; 
    width: 200px; 
    margin:0 auto; 
} 
.right1, .right2{ 
    color:white; 
    float:right; 
    width:100px; 
    background:green; 
} 

HTML

<div class="headertop"> 
    <div class="right1">right 1</div> 
    <div class="right2">right 2</div> 
    <div class="centerblock">Centered</div> 
</div> 

Answer 2

HTML

<div class="headertop"> 
    <div class="centerblock">Centered</div> 
    <div class="rights"> 
    <div class="right1">right 1</div> 
    <div class="right2">right 2</div> 
</div> 
</div> 

CSS

.headertop { 
    width:100%; 
    height:30px; 
    background:black; 
    text-align:center; 
    position:relative; 
    } 

.centerblock { 
    color:white; 
    text-align:center; 
    background:red; 
    width: 200px; 
    margin: 0 auto; 
} 

.rights { 
position:absolute; 
right:0; 
top:0; 
width:100px; 
} 

.right1, .right2 { 
color:white; 
width:50px; 
background:green; 
float:left; 
} 

DEMO：http://jsbin.com/ewihuh/7/edit