CSS-Set-Breite, um% des verbleibenden Bereichs auszufüllen

82

Entschuldigung für den etwas Mülltitel. Ich könnte mir nicht vorstellen, wie ich das besser beschreiben könnte.

Ich versuche, das Google Friend Connect-Mitglieder-Gadget auf meiner Website zu implementieren (bin gerade in das Schema eingetreten und möchte es zumindest zu Testzwecken ohne größere Neugestaltung einfügen).

Mein Problem ist wie folgt:

Ich habe ein Container-Div, das eine Breite von 90% der Hauptseite (Körper) hat. Darin schwebe ich ein Div nach rechts und setze seine Breite auf 300px und lege das Google-Gadget hinein. Was ich möchte, ist, dass ein Div 95% des verbleibenden Platzes links vom Google Gadget Div ausfüllt.

Ich weiß nicht, ob es möglich ist, px und% mit divs und widths zu mischen.

Ich hoffe das macht Sinn.

Vielen Dank

css

— Jon
quelle

Verwandte stackoverflow.com/questions/4873832/…

— Adrien Be

70

Es ist. Sie suchen ein halbflüssiges Layout. Die Suche war ursprünglich der heilige Gral der CSS-Implementierung ... Aber wie Sie an diesem Link sehen können (sie machen 3 Spalten, 2 behoben, aber es ist leicht zu ändern), ist es ein Problem, das lange gelöst wurde =)

— Oli
quelle

Sieht perfekt aus. Danke dir. Ich werde über das Wochenende damit herumspielen.

— Jon

44

Es sind Artikel wie diese, die meine Befürchtung bekräftigen, dass CSS bei weitem kein gutes Werkzeug für das Layout ist.

— s4y

11

@Sidnicious Als jemand, der dies [Konvertieren von Designs in Websites] als meine Brot-und-Butter-Arbeit tut, kann ich Ihnen sagen, dass es weitaus besser ist als alles andere, was vorher oder seither vorgeschlagen wurde. Es ist nicht perfekt und Sie müssen wissen, wie es funktioniert ... Aber sobald Sie es tun, ist es einfach.

— Oli

Wenn Sie jedoch die Breite einer Spalte ändern möchten, müssen Sie die Werte überall bearbeiten. Es gibt eine nervige Vorstellung von "Wenn es funktioniert, berühren Sie es nicht um jeden Preis und kritisieren Sie es bitte nicht", aber das Layout könnte erheblich einfacher sein. Wenn Sie nur% und px mischen und auf andere Werte verweisen, wäre alles viel einfacher.

— Jonathan.

1

@ Jonathan. Es besteht kein Zweifel, dass dies wahr ist - Live-Variablen und Arthmetik in CSS würden die Dinge erheblich vereinfachen, aber das haben wir nicht. Wenn Sie die Plastizität auflösen möchten, schauen Sie sich WENIGER / SASS / etc. An. Sie sind die halbe Lösung.

— Oli

0

Ich habe auch ein kurzes Experiment durchgeführt, nachdem ich mir überall eine Reihe möglicher Lösungen angesehen hatte. Was ich versuchte, war eine Mischung aus flüssigen und festen Zeilen und Spalten.

Das ist, was ich am Ende hatte:

http://jsbin.com/hapelawake

— Anthony Tambrin
quelle

0

Wenn Sie Floats und Clearfixes vermeiden möchten, verwenden Sie das Flex-Layout.

.main {
  display: flex;
  width: 90%;
}
.col1 {
  flex-grow: 1;
}
.col2 {
  width: 300px;
  margin-left: 5%;
}

<div class="main">
  <div class="col1" style="background: #518cf3;">Left column</div>
  <div class="col2" style="background: #94d0bb;">Right column</div>
</div>

Erweitern Sie das Snippet

Hinweis: Fügen Sie bei Bedarf von Ihren unterstützten Browsern Präfixe für Flex-Anbieter hinzu .

— Reggie Pinkham
quelle

-1

Sie müssen einen Algorithmus mit jQuery oder JS erstellen, der den verbleibenden Speicherplatz überprüft und die Breite des "Rest" -Elements dynamisch für einen responsiven Build festlegt. Wenn der Build nicht reagiert, können Sie die Elementbreite testen und festlegen, indem Sie einfache mathematische Berechnungen durchführen.

Wir haben ähnliche Probleme beim Aufbau eines auf Flüssigkeiten reagierenden gitterbasierten Mediensystems festgestellt.

— BasisInteractive
quelle