erzwingt div wächst breiter als das Browserfenster

Wie ich ein DIV zwingen kann, wachsen breiter als Fenster des Browser Kinder ist es horizontal aufzunehmen, anstatt sich auf neue Zeilenerzwingt div wächst breiter als das Browserfenster

dh betrachtet den folgenden Code mit Geige zwingen . Innerhalb eines Containerelements befinden sich 6 untergeordnete Elemente mit einer Mindestbreite von 200 Pixeln, die alle auf Float gesetzt sind: links. Wenn das Fenster groß genug skaliert wird, befinden sich alle in einer Zeile. Wenn es enger wird, beginnen sie, in neue Reihen zu drängen. Idealerweise möchte ich, dass sie in einer Zeile bleiben und der Browser eine Bildlaufleiste anzeigt.

http://jsfiddle.net/krippy2k/x8sDp/20/

.container { 
} 

.child-element { 
    min-width: 200px; 
    float: left; 
    height: 100px; 
} 

.child1 { 
    background-color: purple; 
} 
.child2 { 
    background-color: orange; 
} 
.child3 { 
    background-color: black; 
} 
.child4 { 
    background-color: green; 
} 
.child5 { 
    background-color: blue; 
} 
.child6 { 
    background-color: red; 
} 

<div class="container"> 
    <div class="child-element child1"></div> 
    <div class="child-element child2"></div> 
    <div class="child-element child3"></div> 
    <div class="child-element child4"></div> 
    <div class="child-element child5"></div> 
    <div class="child-element child6"></div> 
</div>

Quelle

2013-08-20 Gerald

Entweder können Sie einen width auf das übergeordnete Element zur Verfügung stellen, was Sie float: left; mit display: inline-block; und white-space: nowrap;

.container { 
    white-space: nowrap; 
} 

.child-element { 
    min-width: 200px; 
    display: inline-block; 
    height: 100px; 
}

Demo

Für die white-space von 4px können zwischen jedes el ement, können Sie margin-left: -4px;

Demo 2

Quelle

2013-08-20 15:44:44

ich im Grunde die gleiche Frage wie die OP hatte und diese Antwort war die beste Lösung. Etwas, das ich hinzufügte, schwebte den Behälter. Dies gab dem Container die Breite seiner Kinder und nicht die Breite der Begrenzungsbox. – Brodie

Der Leerraum zwischen den Elementen ist eigentlich der physische Leerraum (Leerzeichen, Tabulatoren, Zeilenumbrüche) im HTML (reduziert auf ein einzelnes Leerzeichen) zwischen den Kind-Tags, gerendert in welcher Schriftart/Größe, die kaskadiert wurde. Um dies zu vermeiden, können Sie '' font-size: 0; ''im Container festlegen, wobei Sie daran denken müssen, es bei Bedarf explizit in den untergeordneten Elementen festzulegen. –

Hinzufügen eine große Breite an den Behälter arbeiten verwenden

.container { 
    width: 999999px; 
}

Obwohl im nicht sicher, warum Sie so etwas wie dies tun möchte, aus Usability/Schnittstelle Punkt Sicht.

Quelle

2013-08-20 15:45:29 cernunnos

FYI es ist für einen Workflow-Designer, der viele Ebenen von verschachtelten Elementen haben kann. Bestimmte Elemente sollen nebeneinander liegen, wie etwa Then/Else-Klauseln, die schwieriger zu lesen sind, wenn Else unter dem Then gezwungen wird. – Gerald

Ich sehe, wäre nicht irgendeine Form der Baumansicht vorzuziehen? Ich weiß nicht wirklich, was Sie tun, aber horizontale und vertikale Scrolling führen in der Regel zu sehr verwirrenden Schnittstellen, es sei denn Ihr Ziel ist Touchscreens. Auch dies ist eine ziemlich uninformierte Meinung. – cernunnos

Ich dachte an einen Baum, aber es wäre nervig wegen der Menge an Drag & Drop, die benötigt wird.Um bei der Entwicklung und Fehlerbehebung produktiv zu sein, müsste der Baum sowieso vollständig erweitert werden, was uns das gleiche Problem bereiten würde. Der Workflow Foundation-Designer in Visual Studio 2012 ist dem, was ich möchte, ziemlich ähnlich. – Gerald

Anstatt die untergeordneten Elemente zu verschieben, setzen Sie sie auf Inline-Block und setzen Sie white-space:nowrap auf den Container.

.container { 
    white-space:nowrap; 
} 

.child-element { 
    display:inline-block; 
    min-width: 200px; 
    height: 100px; 
}

http://jsfiddle.net/x8sDp/24/

Quelle

2013-08-20 15:45:46

IMHO ist dies eine bessere Lösung als Floating kann unbeabsichtigte Auswirkungen auf den Rest des Layouts haben, da es im Wesentlichen das Element aus dem Fluss der Rest der Seitenstruktur entfernt. Oftmals schafft Floating ein bisschen eine Marionettensituation, die schwer zu managen ist. – orionrush

Gerade die .container zu display:table und den .child-elements gesetzt display:table-cell zu sein und entfernen float:left von .child-element:

.container { 
    display: table; 
} 

.child-element { 
    min-width: 200px; 
    display: table-cell; 
    height: 100px; 
}

DEMO

Quelle

2013-08-20 15:46:50 mattytommo

erzwingt div wächst breiter als das Browserfenster

Antwort

Verwandte Themen