我希望我的页面看起来像这样:
+------+------+
|first |third |
| | |
+------+------+
|second|
| |
+------+
在最新版本的FF和Chrome中,下面的剪辑可以正常工作。但在IE中,输出看起来像这样:
+------+
|first |
| |
+------+------+
|second| third|
| | |
+------+------+
我的剪辑
<style>
#wrapper
{
width: 680px;
}
#first
{
background: Red;
float: left;
width: 500px;
}
#second
{
background: Green;
float: left;
width: 500px;
}
#third
{
background: Red;
}
</style>
<div id="wrapper">
<!-- 1st two Divs-->
<div id="first">Div ONE</div>
<div id="second">Div TWO</div>
<!-- 3rd Div should be on the top right side next to div one -->
<div id="third">Div Three</div>
</div>
如果你能给我一个解决方案而不改变html标记,我将非常感激。
感谢您的时间!
瑞士安德鲁
答案 0 :(得分:1)
试试这个:
<style>
#wrapper
{
width: 680px;
}
#first
{
background: Red;
float: left;
width: 500px;
}
#second
{
background: Green;
width: 500px;
}
#third
{
background: Red;
float: left;
}
</style>
你必须向左浮动第三个div,并从第二个div中移除浮动。
您不必编辑html,但必须重新订购div:
<div id="wrapper">
<div id="first">Div ONE</div>
<div id="third">Div Three</div>
<div id="second">Div TWO</div>
</div>
这将为您提供您正在寻找的显示顺序。
答案 1 :(得分:0)
许多解决方法。将包装宽度设置为1000px。你在#third上试过float: left;
吗?
..可能这样的教程会对你有所帮助:http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/
答案 2 :(得分:0)
这样的事情怎么样:
<style>
#wrapper
{
width: 680px;
}
#first-second-wrapper {
float: left;
width: 500px;
}
#first
{
background: Red;
}
#second
{
background: Green;
}
#third
{
background: Red;
margin-left: 500px;
}
</style>
<div id="wrapper">
<!-- 1st two Divs-->
<div id="first-second-wrapper">
<div id="first">Div ONE</div>
<div id="second">Div TWO</div>
</div>
<!-- 3rd Div should be on the top right side next to div one -->
<div id="third">Div Three</div>
</div>
答案 3 :(得分:0)
在这里,这应该有效:
#wrap { width:800px; position:relative; }
#first, #second, #third { width:400px; height:400px; }
#third { position:absolute; top:0; right:0; }
答案 4 :(得分:0)
我不确定您正在测试哪个版本的IE,但这在我的IE8中正确呈现。当我使用开发工具栏切换到IE7标准模式时,我遇到了问题。这可以用这个css来解决:
#second
{
background: Green;
float: left;
width: 500px;
clear:both;
}
您可能需要在条件注释中包含此内容,因为我不确定其他浏览器的效果。以下是an example。