web-dev-qa-db-ja.com

親を縮小するときにインラインブロックを改行せずに表示する方法

コンテナー（幅100％）に2つの列（インラインブロック）があります。

  1. 左側の列には最小幅、たとえば200px、width：25％が必要です。

  2. 右側の列の幅は75％です。

    <style>
.outer {
    width: 100%;
    border: 1px solid black;
}
.left, .right {
    display:inline-block;
}
.left {
    min-width: 200px;
    width: 25%;
    background-color: #dcc2c2;
}
.right {
    width: 75%;
    background-color: #d0dee8;
}
</style>

    <div class="outer">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

サイズ変更時に最小幅に達するまで、列は横に並んでいますが、最小幅が作動すると、右の列が次の行に表示されます。

次の行に収まらないように、適切な列を縮小するにはどうすればよいですか？

JSFiddleへのリンク

htmlwidthcss
30
code.tweetie

追加 white-space:nowrapおよびoverflow:hidden外側へ：

.outer {
    width: 100%;
    border: 1px solid black;
    white-space:nowrap;
    overflow:hidden;
}

jsFiddleの例

35
j08691

calc(100% - 200px)を使用して、スペースを保持して機能させることができます！

.right {
    width:75%;
    max-width:calc(100% - 200px);
    background-color: #d0dee8;
}

フィドル

css3 calc（）に関する情報

6
Anima-t3d