Ich möchte zwei Elemente in derselben Zeile haben, die float: left
für das Element auf der linken Seite verwendet werden.
Ich habe keine Probleme, dies alleine zu erreichen. Das Problem ist, ich möchte, dass die beiden Elemente in derselben Zeile bleiben , auch wenn Sie die Größe des Browsers sehr klein ändern . Weißt du ... wie es mit Tischen war.
Das Ziel ist es, zu verhindern, dass der Artikel auf der rechten Seite verpackt wird, egal was passiert .
Wie kann ich dem Browser mithilfe von CSS mitteilen, dass ich das Containing lieber dehnendiv
als umbrechen möchte , sodass das float: right;
Div unter dem liegt float: left;
div
?
was ich möchte:
\
+---------------+ +------------------------/
| float: left; | | float: right; \
| | | /
| | |content stretching \ Screen Edge
| | |the div off the screen / <---
+---------------+ +------------------------\
/
css
css-float
css-tables
stretching
Jiaaro
quelle
quelle
Antworten:
Wickeln Sie Ihre Floating
<div>
S in einen Container<div>
, der diesen browserübergreifenden Hack mit minimaler Breite verwendet:Sie können müssen auch "Überlauf" einstellen, aber wahrscheinlich nicht.
Dies funktioniert, weil:
!important
Deklaration in Kombination mitmin-width
bewirkt, dass in IE7 + alles in derselben Zeile bleibtmin-width
, hat jedoch einen Fehler, derwidth: 100px
die!important
Deklaration überschreibt und dazu führt, dass die Containerbreite 100 Pixel beträgt.quelle
Eine andere Option ist, anstatt zu schweben, die Leerraum-Eigenschaft nowrap auf ein übergeordnetes div zu setzen:
und setzen Sie den Leerraum zurück und verwenden Sie eine Inline-Block-Anzeige, damit die Divs in derselben Zeile bleiben, aber Sie können ihr trotzdem eine Breite geben.
Hier ist eine JSFiddle: https://jsfiddle.net/9g8ud31o/
quelle
Wickeln Sie Ihre Floater in ein Div mit einer Mindestbreite, die größer ist als die kombinierte Breite + Rand der Floater.
Keine Hacks oder HTML-Tabellen erforderlich.
quelle
Lösung 1:
Anzeige: Tabellenzelle (nicht weit verbreitet)
Lösung 2:
Tabellen
(Ich hasse Hacks.)
quelle
Eine weitere Option: Schweben Sie nicht in Ihrer rechten Spalte. Geben Sie ihm einfach einen linken Rand, um ihn über den Schwimmer hinaus zu bewegen. Sie benötigen ein oder zwei Hacks, um IE6 zu reparieren, aber das ist die Grundidee.
quelle
Sind Sie sicher, dass schwebende Elemente auf Blockebene die beste Lösung für dieses Problem sind?
Bei CSS-Schwierigkeiten in meiner Erfahrung stellt sich oft heraus, dass ich keinen Weg sehe, das zu tun, was ich will, weil ich in Bezug auf mein Markup in eine Tunnelvision geraten bin (ich denke: "Wie kann ich diese machen ?" Elemente tun dies ? ") anstatt zurück zu gehen und zu schauen, was genau ich erreichen muss, und vielleicht mein HTML leicht zu überarbeiten, um das zu erleichtern.
quelle
Ich würde empfehlen, Tabellen für dieses Problem zu verwenden. Ich habe ein ähnliches Problem und solange die Tabelle nur zum Anzeigen einiger Daten verwendet wird und nicht für das Hauptseitenlayout, ist dies in Ordnung.
quelle
Fügen Sie diese Zeile Ihrem Floated-Element-Selektor hinzu
Dadurch wird verhindert, dass der Breite Polster und Ränder hinzugefügt werden, sodass das Element immer in einer Reihe bleibt, auch wenn Sie z. drei Elemente mit einer Breite von 33,33333%
quelle
Wenn der Benutzer die Fenstergröße horizontal reduziert und dadurch Floats vertikal gestapelt werden, entfernen Sie die Floats und verwenden Sie auf dem zweiten Div (das war ein Float) margin-top: -123px (Ihr Wert) und margin-left: 444px (Ihr Wert) to Positionieren Sie die Divs so, wie sie mit Schwimmern erschienen sind. Wenn sich das Fenster auf diese Weise verengt, bleibt das Div auf der rechten Seite an Ort und Stelle und verschwindet, wenn die Seite zu schmal ist, um es aufzunehmen. ... was (für mich) besser ist, als das rechte Div unter das linke Div zu "springen", wenn das Browserfenster vom Benutzer verengt wird.
quelle
Ich habe mich darum gekümmert, jQuery zu verwenden. Der Grund, warum ich es so gemacht habe, war, dass A und B Prozentbreiten waren.
HTML:
CSS:
jQuery:
quelle