css - div 布局为列

Question

我有以下代码：

见http://jsfiddle.net/bniya_dev/SYPNC/2/

<div>
    <div id="mainHeader">
        <div id="details1">
            <span>details1</span>
        </div>
        <div id="details2">
            <span>details2</span>
        </div>
    </div>
    <div id="header">
        <span>header </span>
    </div>
</div>

css

div#details1
{
    float:left; width:100px;

}
div#details2
{
 float:right;

}

我希望它看起来像下图：

我应该设置什么风格？

我希望它适用于所有浏览器，甚至是移动浏览器

http://jsfiddle.net/bniya_dev/SYPNC/2/

Answer 1

尝试这个：

您需要floats在标题之前清除。

.clr{clear:both;}

演示

Answer 2

* {
    margin: 0;
    font-family: Arial ;
    font-size: 35px;
    line-height: 65px;
}
div#mainHeader {
    width: 777px;
    height: 65px;
    background-color: aqua;
    text-align: right;
}
div#details1 {
    width: 620px;
    height: 65px;
    background-color: #ED1C24;
    float: left;
}
div#details2 {
    width: 157px;
    height: 65px;
    background-color: #22B14C;
    float: left;
    text-align: center;
}
div#header {
    text-align: left;
}

这是演示

也许您应该自己更改字体（*^__^*）...

Answer 3

尝试这个：

div#details1
{
    float:left; 
    background: red;
    width: 90%;
    text-align: right;

}
div#details2
{
 float:right;
    background: green;
    width: 10%;

}
#header{
    clear: both;
}

演示

但更好的方式来标记这样......

<div id="mainHeader">
<div id="details">
<span class="one">detail1</span>
<span class="two">detail2</span>
</div>

然后你float: right;可以#details

Answer 4

试试这个：http: //jsfiddle.net/SYPNC/9/ 这应该符合您的要求。你仍然可以调整你的宽度header1/header2

Answer 5

根据您的要求，以百分比形式给出以下宽度

div#details1
{
   float:left; width:90%;
} 

Answer 6

你的 html,css 都应该像下面这样改变

HTML

<div id="details1"> <span>details1</span>

</div>
<div id="details2"> <span>details2</span>

</div>
<div id="header"> <span>header </span>
</div>

CSS

body{

    width:500px;
}
#details1 {
    float:left;
    width:300px;
    height:50px;
    background-color:red;
}
#details2 {
    float:right;
    width:200px;
    height:50px;
    background-color:green;
}

演示