Css IE7中的浮动元素
由于IE7对“浮动”的拙劣处理,我已经浪费了一个下午的大部分时间。 如何使用float获得如图所示的两列布局 我正在努力实现: 这是我的HTMLCss IE7中的浮动元素,css,internet-explorer,css-float,Css,Internet Explorer,Css Float,由于IE7对“浮动”的拙劣处理,我已经浪费了一个下午的大部分时间。 如何使用float获得如图所示的两列布局 我正在努力实现: 这是我的HTML <div class="holder"> <div class="footer-float-content"> <p class="footer-regional-title">AMERICAS</p>
<div class="holder">
<div class="footer-float-content">
<p class="footer-regional-title">AMERICAS</p>
<ul>
<li><a href="#">EN / United States</a></li>
<li><a href="#">PT / Brazil</a></li>
</ul>
<p class="footer-regional-title">APAC</p>
<ul>
<li><a href="#">日本語 / 日本</a></li>
<li><a href="#">中文 / 中人民共和国</a></li>
<li><a href="#">EN / Hong Kong</a></li>
<li><a href="#">EN / Singapore</a></li>
<li><a href="#">EN / Australia & NZ</a></li>
<li><a href="#">ภาษาไทย / ประเทศไทย</a></li>
</ul>
</div>
<div class="footer-float-content">
<p class="footer-regional-title">EMEA</p>
<ul>
<li><a href="#">EN / United Kingdom</a></li>
<li><a href="#">FR / France</a></li>
<li><a href="#">NL / Nederland</a></li>
<li><a href="#">ES / España</a></li>
<li><a href="#">DE / Deutschland</a></li>
<li><a href="#">EN / India</a></li>
<li><a href="#">RU / Россия</a></li>
<li><a href="#">EN / FR/ NL Belgium</a></li>
</ul>
</div>
</div>
HTML:
<div class="holder">
<div class="footer-float-content">
<p class="footer-regional-title">AMERICAS</p>
<ul>
<li><a href="#">EN / United States</a></li>
<li><a href="#">PT / Brazil</a></li>
</ul>
<p class="footer-regional-title">APAC</p>
<ul>
<li><a href="#">日本語 / 日本</a></li>
<li><a href="#">中文 / 中人民共和国</a></li>
<li><a href="#">EN / Hong Kong</a></li>
<li><a href="#">EN / Singapore</a></li>
<li><a href="#">EN / Australia & NZ</a></li>
<li><a href="#">ภาษาไทย / ประเทศไทย</a></li>
</ul>
</div>
<div class="footer-float-content">
<p class="footer-regional-title">EMEA</p>
<ul>
<li><a href="#">EN / United Kingdom</a></li>
<li><a href="#">FR / France</a></li>
<li><a href="#">NL / Nederland</a></li>
<li><a href="#">ES / España</a></li>
<li><a href="#">DE / Deutschland</a></li>
<li><a href="#">EN / India</a></li>
<li><a href="#">RU / Россия</a></li>
<li><a href="#">EN / FR/ NL Belgium</a></li>
</ul>
</div>
<div class="clr"></div>
</div>
.clr{ clear:both;}
.holder{ padding:0px 20px;}
.holder div:first-child{ float:left;}
div.footer-float-content{ float: right; width: 155px; }
div.footer-float-content ul{ padding:0px; list-style:none;}
div.footer-float-content ul li a{ text-decoration:none; color:#A5CDEB;}
div.footer-float-content ul li a:hover{ color:#6B8596;}
.region-block .regions-list ul{ width:155px; display: inline; list-style:none; font-size:13px; line-height:16px; }
p.footer-regional-title{ font-weight: bold; font-weight: 10pt; text-transform: uppercase; margin: 0;}
IE7中的页面是什么样子的?slash,你能设置一个JSFIDLE吗?确保容器类(holder)的宽度至少为310px,以便ie7进行压缩。可能是我,但我通过JSFIDLE在ie7模式下运行了这个,看起来不错。你可以将div.footer-float-content的宽度增加到165px
.clr{ clear:both;}
.holder{ padding:0px 20px;}
.holder div:first-child{ float:left;}
div.footer-float-content{ float: right; width: 155px; }
div.footer-float-content ul{ padding:0px; list-style:none;}
div.footer-float-content ul li a{ text-decoration:none; color:#A5CDEB;}
div.footer-float-content ul li a:hover{ color:#6B8596;}
.region-block .regions-list ul{ width:155px; display: inline; list-style:none; font-size:13px; line-height:16px; }
p.footer-regional-title{ font-weight: bold; font-weight: 10pt; text-transform: uppercase; margin: 0;}