Anzeige Inline-Block mit Breiten als Prozent

Ich versuche, 2 Abschnitte nebeneinander mit inline-block und Breiten als Prozentsatz zu setzen, aber es füllt nicht die gesamte Breite meines Fensters aus.Anzeige Inline-Block mit Breiten als Prozent

Was ich habe, so weit:

HTML

<section class="left-content"> 
    "Some Code" 
</section> 
<section class="main-content"> 
    "Some More Code" 
</section>

CSS

.left-content, .right-content { 
    width: 15%; 
    min-width: 150px; 
    padding: 5px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
} 
.main-content { 
    width: 85%; 
    min-width: 712px; 
    padding: 10px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
}

Aber wenn ich den genauen Prozentsatz trainieren bis zu einer Dezimalstelle auf meinem Bildschirm nicht wahr Arbeit. Kennt jemand einen Weg, dies mit inline-block zu tun oder muss ich float verwenden?

Quelle

2013-09-21 dpDesignz

Ich habe festgestellt, dass es in der Regel einen physischen Raum zwischen den Elementen gibt. Sie können entweder den Abstand zwischen den Elementen im Markup entfernen oder auf dem übergeordneten Element "font-size: 0" festlegen und dann die Schriftart in den Elementen selbst wiederherstellen. – Chad

Es ist aufgrund der Leerzeichen und Zeilenumbruch in Ihrem HTML-Markup, die dieses Problem verursacht. Es gibt zwei Möglichkeiten, das „Problem“ zu lösen:
1. die Zeilenumbrüche entfernen und white-space aus dem Code
2. font-size des übergeordneten Elements auf ‚0‘

Zusätzlich haben Sie box-sizing: border-box gesetzt ?

Quelle

2013-09-21 14:20:04 Netsurfer

Danke dafür. Nur ein Schmerz, dass ich die Schriftgröße zurücksetzen muss. :) – dpDesignz

Ja ;-) aber es gibt keine Methode ohne irgendwelche Nachteile. Die Alternative mit 'Floats' ist nicht besser ...! Sie haben die Wahl zwischen dem geringeren von zwei Übeln. – Netsurfer

danke, dass Sie mir in die richtige Richtung zeigen, aber warum löschen Sie nicht einfach den Whitespace im HTML. In seinem Fall: [code] ...

... [mehr code] –

Anzeige Inline-Block mit Breiten als Prozent

Antwort

Verwandte Themen