我遇到了一个奇怪的问题(仅限 ie7),右浮动元素的左浮动子元素不受其父元素宽度的限制,而是一直到父元素的最左侧并停在最近的左侧浮动div。您可以参考以下小提琴的示例代码。在所有其他浏览器中看起来都很好,但不幸的是我必须支持 ie7。
有没有办法解决这个问题而无需在两个浮动子项的父项上设置显式宽度并且不更改标记结构?
下面附上的小提琴代码:
<style>
.wrapper{
position: relative;
width: 500px;
min-height: 18px;
margin: 0 auto;
padding: 14px 0;
background-color: red;
}
.menu_L{
color: #504A43;
height: 18px;
float: left;
width: 100px;
background-color: blue;
}
.menu_R_wrapper{
float: right;
}
.menu_R{
position: relative;
float: right;
}
.menu_R .item_L,
.menu_R .item_R{
width: 50px;
height: 18px;
}
.menu_R .item_L{
float: left;
background-color: orange;
}
.menu_R .item_R{
float: right;
background-color: green;
}
</style>
<div class="wrapper">
<div class="menu_L"></div>
<div class="menu_R_wrapper">
<div class="menu_R">
<div class="item_L"></div>
<div class="item_R"></div>
</div>
</div>
</div>