如何让div浮动在另一个div的两端？

Question

到目前为止，我已经试过了，

http://jsfiddle.net/BXSJe/4/

我试图把2周的div在另一个div的左右两端，我尝试使用浮动：左和float：正确的，但他们表现出了在新的生产线

我想是这样的，

[leftcap] ................. TITLE ......... ...... [右盖]]

我真的很抱歉，我不能代表比这更好。

HTML

<div id="shell"> 
    <div id="title"> 
     <div id='leftcap'>o</div> 
     TITLE HERE 
     <div id='rightcap'>x</div> 
    </div> 
    <div id="content">Content</div> 
</div> 

CSS

#shell { 
width:500px; 
height:300px; 
background:lightGrey; 
} 

#title { 
background:green; 
padding:5px; 
border-radius:25%; 
text-align:center; 
} 
#content 
{ 
    text-align:center; 
    vertical-align:center; 
} 
#leftcap 
{ 
    width:10%; 
} 
#rightcap 
{ 
    width:10%; 
} 
#leftcap,#rightcap 
{ 
    height:100%; 
    width:10%; 
    background:red; 
} 

UPDATE：使用float属性的问题解决了，我还有一个问题，如何垂直居中对齐文本在一个容器div？

Answer 1

你需要的是CSS的float属性哪种类型强迫元素左对齐或右对齐。

更新小提琴：http://jsfiddle.net/BXSJe/820/

希望这有助于。 :)

Answer 2

您将需要创建HTML这样：

<div id="mainDiv"> 
    <div id="floatLeft">Left floated text here</div> 
    <div id="floatRight">Right floated text here</div> 
</div> 

和CSS这样：

div { 
    background-color: Red; 
    height:100px; 
    width: 100%; 
} 

#floatLeft { 
    width:100px; 
    float:left; 
    background-color: Blue; 
} 

#floatRight { 
    width:100px; 
    float:right; 
    background-color: Gray; 
} 

你可以看到这个这里 - >http://jsfiddle.net/g6U8n/

希望这有助于！

Answer 3

你相同的代码只需要添加一些属性，看看这里

<div id="shell"> 
    <div id="title"> 
     <div id='leftcap'>o</div> 
     TITLE HERE 
     <div id='rightcap'>x</div> 
    </div> 
    <div id="content">Content</div> 
</div> 

CSS

#shell { 
width:500px; 
height:300px; 
background:lightGrey; 
} 

#title { 
background:green; 
padding:5px; 
border-radius:25%; 
text-align:center; 
} 
#content 
{ 
    text-align:center; 
    vertical-align:center; 
} 
#leftcap 
{ 
    width:10%; 
    display:inline-block; 
    float:left; 
} 
#rightcap 
{ 
    width:10%; 
    display:inline-block; 
    float:right; 
} 
#leftcap,#rightcap 
{ 
    height:100%; 
    width:10%; 
    background:red; 
} 

希望这是工作;）