Question

我有以下代码：

<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;

}

我希望它看起来如下图： enter image description here

我应该设置什么样的风格？

我希望它能在所有浏览器中工作，甚至是移动浏览器

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

Answer 1

试试这个：

您需要在标题前清除floats。

.clr{clear:both;}

<强> DEMO

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;
}

This is the Demo

也许你应该自己改变字体（* ^ __ ^ *）......

Answer 3

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

的宽度

Answer 4

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

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

Answer 5

你的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;
}

DEMO

Answer 6

试试这个：

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

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

}
#header{
    clear: both;
}

demo

但更好的标记方式就是这样......

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

然后您可以float: right;到#details

div布局为列

6 个答案: