在Firefox 10,11版本中,以下div显示为我想要的 - 从左到右,水平:
.containerForListStyles
{
width: 100%;
margin: 0 auto;
display:inline-block;
}
.listStyle1
{
font-family: Arial, sans-serif;
display:inline-block;
width: 250px;
margin-right: 5px;
margin-left: 3%;
}
.listStyle2
{
font-family: Arial, sans-serif;
display:inline-block;
width: 250px;
margin-left: 5px;
margin-right: 3%;
}
<div class="containerForListStyles">
<a href="www.oursite.com"><img src="www.oursite.com/images/logo-landing2.png"</img></a>
<div class="listStyle1">
This is the center div's text
</div>
<div class="listStyle2">
This is the right side text...
</div>
</div>
在Firefox中,图像位于左侧,然后listStyle1 div位于其右侧,则listStyle2 div位于右侧,全部位于同一行。
在IE9中,3个元素(图像锚点,div 1和div 2)垂直堆叠
所以我研究了一些有关内联块和IE故障的帖子,但帖子都说“IE8之前”或“IE7之前”存在问题。
我需要更改什么才能让IE9显示这3个div的水平左/中/右布局? 似乎IE9忽略了'inline-block'。
注意:我的Android智能手机(HTC Evo)正确显示了与Firefox相同的所需水平布局。
答案 0 :(得分:1)
为什么不尝试浮动元素?