0

これはかなり具体的であることは知っていますが、答えが見つからないようです。IE がレイアウト内のボックスのサイズを解釈する際に問題があることは知っていますが、これが私の問題と関係があるかどうかはわかりません。

基本的に、このページのテキストは、親要素でテキストをすべて 1 行に収めることができても、使用可能なスペースを埋めることはありません。

ここに画像の説明を入力

この CSS は、親要素とリンクをそれぞれ制御します

#threeCol { 
    clear: both;
    float: left;
    margin-top: 18px; 
    width: 100%; 
    margin-bottom: 10px; }

#threeCol .col {  
    background: #edf1f7; 
    color: white; 
    float: left; 
    margin-right: 1px; 
    width: 316px; 
    height: 320px; 
}


#threeCol .col.last { 
    margin-right: 0px;
}


#threeCol .col .hl { 
    background: #0F2B6B;
    color: white; 
    display: block; 
    font-size: 1.5em; 
    padding: 20px; 
    text-align: justify;
}


#threeCol .col .cl { 
    background: #e6ebf2;  
    color: #0F2B6B; 
    font-size: 1.1em; 
    line-height: 1.2em; 
    padding: 20px; 
}

#threeCol .col .cl a 
{ 
    background: rgba(15, 43, 107, 0.1); 
    clear: both; 
    color: #0F2B6B; 
    float: left; 
    font-size: 0.85em; 
    margin-bottom: 3px; 
    padding: 4px 0px 4px 15px; 
} 


#threeCol .col .cl a:hover { 
    text-decoration: none; 
    background: rgba(15, 43, 107, 0.8); 
    color: white; 
}

HTML

<div class="col last">
                <div class="hl">Schools &amp; teachers</div>
                <div class="cl">
                    Educational downloads
                    <br>
                    <a href="materials/schools-resource-pack.pdf">» Schools Resource Pack</a>
                    <br>
                    <a href="http://www.liberty-human-rights.org.uk/materials/human-rights-act-poster-february-2010.pdf">» Human Rights Act Poster</a>
                    <br>
                    <a href="http://www.liberty-human-rights.org.uk/materials/new-guide-to-campaigning.pdf">» Liberty Guide to Campaigning</a>
                    <br>
                </div>
            </div>
4

1 に答える 1

1

投稿したコードは、質問で言及した問題を示していません

フィドル

デフォルトでは、テキストが折り返されるため、実際にはこれは予期されることです。

ただし、ブルート フォースを使用する場合はwhite-space: pre-wrap、

#threeCol .col .cl aクラス。

于 2013-07-11T12:11:27.907 に答える