Entschuldigung für den leicht abfälligen Titel. Ich konnte mir nicht vorstellen, wie ich das besser beschreiben sollte.CSS Breite einstellen, um% der restlichen Fläche auszufüllen

Ich versuche, das Google Friend Connect-Mitglieder-Gadget auf meiner Website zu implementieren, (nur in das Schema und möchte es ohne ein großes Redesign, zumindest für Testzwecken) einfügen.

Mein Problem ist wie folgt:

ich einen div-Container haben, die eine Breite von 90% der Haupt-Seite hat (Körper). In diesem schwebe ich ein div nach rechts und setze seine Breite auf 300px und setze das Google Gadget hinein. Was ich möchte, ist in der Lage zu sein, ein div zu haben, füllen Sie 95% des verbleibenden Raumes links vom Google Gadget div.

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

Ich hoffe, das macht Sinn.

Dank

Quelle

2008-12-05 Jon

In Verbindung stehende http://stackoverflow.com/questions/4873832/make-a-div-fill-up-the-remaining-width –

Es ist. Sie suchen nach einem halbflüssigen Layout. Die Quest war ursprünglich die holy grail of CSS implementation ... Aber wie Sie von diesem Link sehen können (sie machen 3 Spalten, 2 behoben, aber es ist einfach zu ändern), ist es ein Problem lange gelöst =)

Quelle

2008-12-05 09:34:41 Oli

Sieht perfekt aus. Vielen Dank. Ich werde damit am Wochenende eine Geige spielen. – Jon

+44

Es sind Artikel wie diese, die meine Befürchtung bestätigen, dass CSS weit davon entfernt ist, ein gutes Layout-Tool zu sein. – s4y

+11

@Sidnicious Als jemand, der das macht [das Umwandeln von Designs in Webseiten] als meine Brot-und-Butter-Arbeit, kann ich dir sagen, dass es viel besser ist als alles, was vorher war oder seitdem vorgeschlagen wurde. Es ist nicht perfekt und Sie müssen wissen, wie es funktioniert ... Aber sobald Sie es tun, ist es einfach. – Oli

Ich habe eine schnelle Experimentieren Sie auch, nachdem Sie eine Reihe von möglichen Lösungen überall gesehen haben. Was ich versuchte, war eine Mischung aus flüssigen und festen Reihen und Spalten.

Dies ist, was ich am Ende mit:

http://jsbin.com/hapelawake

Quelle

2015-01-05 04:37:59

-2

Sie benötigen einen Algorithmus mit jQuery oder JS zu schaffen, die für den verbleibenden Raum überprüft und legt die Breite des „Rest“ Element dynamisch, pro ein responsiver Build. 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 flüssigkeitsgesteuerten gitterbasierten Mediensystems erlebt.

Quelle

2015-05-09 18:31:30 BasisInteractive

Flexbox Lösung

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

<div class="main"> 
 
    <div class="col1" style="background: #eee;">Left column</div> 
 
    <div class="col2" style="background: #ccc;">Right column</div> 
 
</div>

Hinweis: hinzufügen flex Anbieter Präfixe, wenn sie von Ihrem supported browsers erforderlich.

Quelle

2017-07-26 20:12:29

CSS Breite einstellen, um% der restlichen Fläche auszufüllen

Antwort

Flexbox Lösung

Verwandte Themen