Come display inline blocchi senza romperle su nuova riga quando il restringimento genitore

Ho 2 colonne (inline blocchi) in un contenitore (100% della larghezza).

  1. Colonna a sinistra ha un min-width, dire 200px, larghezza:25%.

  2. Lato destro della colonna larghezza: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>

Fino a quando il min-width è raggiunto quando il ridimensionamento, le colonne siedono fianco a fianco, che è quello che voglio, ma una volta che il min-width calci, nella colonna di destra cade sulla riga successiva.

Come posso rendere la colonna di destra a ridursi, ma non cadere nella riga successiva ?

Link al JSFiddle

  • è possibile utilizzare calc() per limitare la max-width della colonna di destra jsfiddle.net/viphalongpro/4Bqvg/4 Tuttavia calc() non è supportato da IE8 (e sotto)
InformationsquelleAutor code.tweetie | 2014-06-10



2 Replies
  1. 33

    Aggiungere white-space:nowrap e overflow:hidden esterno:

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

    jsFiddle esempio

  2. 6

    È possibile utilizzare calc(100% - 200px) mantenere gli spazi per farlo funzionare!

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

    Violino

    Informazioni su css3 calc()

    • Grande, questo è quello che volevo, grazie!
    • Tenete a mente che non funziona in IE8 o di più (vedi info su css3 calc() link nella mia risposta). Se questo funziona per voi, vi prego di accettare la mia risposta. Comunque accettare @j08691
    • Sì, sapeva che non funziona in IE8 o più, grazie ancora per ricordare. Ma come ti ha detto @j08691 la soluzione sembra funzionare troppo.
    • Wow css3 è impressionante
    • Sì sì sì!!!!
    • Calc è bello, basta essere consapevoli del fatto che può essere prestazioni pesante se usato molto. Questo vale per la maggior parte di matematica funzionalità orientata.

Lascia un commento