die "leere Raum" in einem Inline-Block-Layout Coloring

Question

ich eine einfache zweispaltige inline-block -basierte Layout haben, die aus einer Reihe von Stücken besteht, die wie folgt aussehen:

I

.doc { 
 
    display: inline-block; 
 
    margin-right: 5em; 
 
    width: 30%; 
 
} 
 
.code { 
 
    display: inline-block; 
 
}

<div class="outer"> 
 

 
    <div class="doc"> 
 
    Documentation goes here. 
 
    </div> 
 

 
    <div class="code"> 
 
    <pre><code> 
 
     int main() { 
 
     printf("The code goes here.\n"); 
 
     } 
 
     </code></pre> 
 
    </div> 
 

 
</div>

möchte die richtige "Spalte" eine background-color haben, so dass ich naiv versuchte dies:

.code { 
    display: inline-block; 
    background-color: #e0e0e0; 
} 

Bu t, die mehrere Probleme dar:

1. Die background-color wird nur auf die Länge der Leitungen angewendet in den <pre> Block, einen zackigen rechten Rand zu verlassen.

   Ich kann dieses besondere Problem lösen, wenn ich eine absolute width auf der class="code" Spalte, wie folgt angeben:

.code { 
    display: inline-block; 
    background-color: #e0e0e0; 
    width: 5in; 
} 

aber ich will keine absolute width dort. Ich versuchte width: 100% (womit ich meinte "die width des enthaltenden Elements"), aber das hatte keine Wirkung.

1. Die background-color ist nicht zu "leeren Raum" angewendet, die auftritt, wenn die <div> links (class="doc") länger ist als die rechte <div>.

   Ich bin mir nicht sicher, wie man dieses auflöst.

Wie bekomme ich den „leeren Raum“ in diesen beiden Beispielen die richtigen background-color zu haben?

Here ist ein Kinderspiel.

Answer 1

Option # 1 (für modernen Browser)

• Verwendung flexbox

.outer { 
 
    display: flex; 
 
    margin:10px 0 
 
} 
 
.doc { 
 
    margin-right: 5em; 
 
    width: 30%; 
 
} 
 
.code { 
 
    background-color: red; 
 
    flex:1 
 
}

<div class="outer"> 
 

 
    <div class="doc"> 
 
    <p> 
 
     Documentation goes here. 
 
    </p> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis rutrum leo, interdum rutrum dui consectetur eget. Sed sed odio pellentesque, efficitur enim a, ornare odio. Pellentesque semper metus vel ligula tristique, eu suscipit odio porta. Pellentesque 
 
     sagittis nunc sapien, non finibus elit congue ullamcorper. Duis et vulputate sem. Suspendisse dictum egestas sapien, vitae bibendum felis aliquet et. In a augue facilisis, luctus sem ut, auctor nulla. Nullam eget libero in mauris blandit pretium. 
 
     Sed sed porta nunc. Etiam faucibus sed nisl eu suscipit. Phasellus scelerisque in purus in convallis. Donec sed sem ipsum. Nulla ultricies tempus quam, a faucibus quam tincidunt ac. Etiam et purus ultricies, pretium justo vehicula, venenatis risus. 
 
     Vivamus purus dui, auctor id posuere in, dapibus convallis lorem.</p> 
 
    </div> 
 

 
    <div class="code"> 
 
    <pre><code> 
 
    int main() { 
 
    printf("The code goes here.\n"); 
 
    } 
 
    
 
    // here is 
 
    // some other code 
 
    </code></pre> 
 
    </div> 
 

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

 
    <div class="doc"> 
 
    Documentation goes here. 
 
    </div> 
 

 
    <div class="code"> 
 
    <pre><code> 
 
    int main() { 
 
    printf("The code goes here.\n"); 
 
    } 
 
    </code></pre> 
 
    </div> 
 

 
</div>

Option # 2 (für alten Browser)

• Verwendung table/table-cell

.outer { 
 
    display: table; 
 
    margin:10px 0 
 
} 
 
.doc { 
 
    padding-right: 5em; 
 
    width: 30%; 
 
    display: table-cell 
 
} 
 
.code { 
 
    background-color: red; 
 
    display: table-cell 
 
}

<div class="outer"> 
 

 
    <div class="doc"> 
 
    <p> 
 
     Documentation goes here. 
 
    </p> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis rutrum leo, interdum rutrum dui consectetur eget. Sed sed odio pellentesque, efficitur enim a, ornare odio. Pellentesque semper metus vel ligula tristique, eu suscipit odio porta. Pellentesque 
 
     sagittis nunc sapien, non finibus elit congue ullamcorper. Duis et vulputate sem. Suspendisse dictum egestas sapien, vitae bibendum felis aliquet et. In a augue facilisis, luctus sem ut, auctor nulla. Nullam eget libero in mauris blandit pretium. 
 
     Sed sed porta nunc. Etiam faucibus sed nisl eu suscipit. Phasellus scelerisque in purus in convallis. Donec sed sem ipsum. Nulla ultricies tempus quam, a faucibus quam tincidunt ac. Etiam et purus ultricies, pretium justo vehicula, venenatis risus. 
 
     Vivamus purus dui, auctor id posuere in, dapibus convallis lorem.</p> 
 
    </div> 
 

 
    <div class="code"> 
 
    <pre><code> 
 
    int main() { 
 
    printf("The code goes here.\n"); 
 
    } 
 
    
 
    // here is 
 
    // some other code 
 
    </code></pre> 
 
    </div> 
 

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

 
    <div class="doc"> 
 
    Documentation goes here. 
 
    </div> 
 

 
    <div class="code"> 
 
    <pre><code> 
 
    int main() { 
 
    printf("The code goes here.\n"); 
 
    } 
 
    </code></pre> 
 
    </div> 
 

 
</div>

Answer 2

Auf zuverlässigen Weg zur Arbeit Cross-Browser (auf älteren Versionen von IE) ist die Verwendung von Javascript. Erstellen Sie eine Funktion, die auf Dokument bereit ausgeführt wird, und immer dann, wenn die Bildschirmbreite geändert wird. Die Funktion müsste die Höhe beider Spalten zurücksetzen, die Höhe von beiden messen und dann die Höhe festlegen, auf die die Spalte je größer ist.

adjustColumnHeight(); 

$(window).resize(function(){ 
    adjustColumnHeight() 
}); 

var adjustColumnHeight = function() { 

    // Set height of both columns to auto 

    // Find height of each column 

    // Set both columns to the height of the tallest column 
}; 

Es könnte eine gute Idee sein, die Größe ändern() zum Entprellen von adjustColumnHeight() in einem setTimeout setzen, damit es nicht so oft nicht aus.