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

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *