0

一部のdivに問題があります。簡単に言うと、必要なものは次のとおりです。特定の幅（同じ幅）の2つのdiv-1つは左にフロート、もう1つは右に、3つ目のdivは残りのすべてのスペースを占有します。divはdisplay：inline-blockを使用して、同じ行に配置しています。

私はこれを試しました：

    <div class="wrapper">
        <div class="control leftControl"></div>
        <div class="display"></div>         
        <div class="control rightControl"></div>
    </div>

そしてここに私のCSSがあります：

.wrapper {
    width: 100%;
    height: 100%;
    min-width: 960px;
    background-color: #E8E8E8;
}

.control {
    width: 10%;
    height: 100%;
    display: inline-block;
    background-color: #ADADAD;
}

.leftControl {
    float: left;
}

.rightControl {
    float: right;
}

.display {
    width: 80%;
    height: 100%;
    display: inline-block;
}

問題は、ある解像度で％を使用すると、最後のdiv（controlRight）が新しい行に移動することです。理由を理解でき、ディスプレイで79％を使用すると、divがほぼ正しく表示されます（1％は未使用のままです）。これが正しい解決策ではないことは私には明らかです。どんな助けでも大歓迎です。

4

1 に答える 1

1

すべての要素を入れることができfloat:left、100% は常に収まります:フィドル

HTML

<div class="control"></div>
<div class="display"></div>         
<div class="control"></div>

CSS

.control {
    width: 10%;
    height: 200px;
    background-color: green;
    float:left;
}

.display {
    width: 80%;
    height: 200px;
    background-color:blue;
    float:left; 
}​

すべてを配置float leftすると、右側に div が 1 つずつプッシュされます。

于 2012-11-30T13:57:54.053 に答える