0

IE7 の "float" のくだらない扱いのおかげで、私は午後のほとんどを無駄に過ごしました。float を使用して示されているように 2 列のレイアウトを作成するにはどうすればよいですか?

私は達成しようとしています:

ここに画像の説明を入力

ここに私の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 &amp; NZ</a></li>
                                <li><a href="#">ภาษาไทย / ประเทศไทย&lt;/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>

ご覧のとおり、2 列のレイアウトを使用します。

私のCSSは次のとおりです。

div.footer-float-content
{
float: left;
width: 155px;
display: inline;
padding-left: 20px;

}
.region-block .regions-list ul{

width:155px;

display: inline;
list-style:none;
font-size:13px;
line-height:16px;
}

p.footer-regional-title
{
display: inline;
padding-left: 17px;
font-weight: bold;
font-weight: 10pt;
text-transform: uppercase;
margin: 0;
width: 155px;
}
4

1 に答える 1

1

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 &amp; NZ</a></li>
                                <li><a href="#">ภาษาไทย / ประเทศไทย&lt;/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>

CSS:

.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;}
于 2013-03-27T19:51:39.127 に答える