nicht angemeldet
Einen Div automatisch auf maximale Breite bringen
Hi,
als erstes mal der Quelltext:
<html>
<head>
<title>test</title>
<style type="text/css">
.container{width:1200px;background-color:#ddd;height:400px;}
.eins, .zwei, .drei, .fuenf, .sechs{float:left; width:100px;}
.eins {background-color:#f00}
.zwei {background-color:#0f0}
.drei {background-color:#00f}
.vier {background-color:#ff0}
.fuenf {background-color:#f0f}
.sechs {background-color:#0ff}
</style>
</head>
<body>
<div class="container">
<div class="eins">
Nr.
</div>
<div class="zwei">
name
</div>
<div class="drei">
surname
</div>
<div class="vier">
info
</div>
<div class="fuenf">
status
</div>
<div class="sechs">
edit
</div>
</div>
</body>
</html>
Mein Problem liegt darin, dass sich der div mit der class "vier" automatisch immer auf die verbleibende Breite ausweiten soll. Die Breiten sind hier nur Beispiele und sind im Original immer unterschiedlich.
Die Funktion dahinter: Das Feld "info" wird voraussichtlich immer die meisten/relevantesten Informationen enthalten. Deswegen soll es am breitesten werden.
Ich hoffe ihr könnt mir helfen...
Viele Grüße,
Kilian
-
Hallo!
Mein Problem liegt darin, dass sich der div mit der class "vier" automatisch immer auf die verbleibende Breite ausweiten soll. Die Breiten sind hier nur Beispiele und sind im Original immer unterschiedlich.
Ein div ist ein Block-Element und nimmt ohne Breitenangabe immer die maximal zur Verfügung stehende Breite an.
Ausserdem könntest du die vielen floatenden Elemente durch flexboxen ersetzen. Damit hast du noch weitaus mehr Möglichkeiten zur Anordnung der Elemente und ausserdem keine Probleme welche floats manchmal mit sich bringen. Das solltest du aber von der Zielgruppe (Browserunterstützung) abhängig machen.
Grüße, Matze
-
Hi,
als erstes mal ...
eine Anmerkung: Ich habe den Eindruck, dass deine Wahl von DIV-Elementen hier nicht die "richtige" (von der Semantik her) ist, und somit eher unter "Divitis" fällt.
Mein Problem liegt darin, dass sich der div mit der class "vier" automatisch immer auf die verbleibende Breite ausweiten soll. Die Breiten sind hier nur Beispiele und sind im Original immer unterschiedlich.
Zunächst einmal nehmen Blocklevel-Elemente grundsätzlich immer die "komplette" Breite ein, es sei denn, man ändert deren Eigenschaft(en) so ab, dass sie es nicht mehr tun.
Dies kann bspw. durch eine entsprechende Angabe für 'display' erfolgen, oder eben auch, wie in deinem Fall, durch 'float'. Denn bei Float ohne eine explizite Angabe für 'width', greift das sog. "shrink-to-fit".Die Funktion dahinter: Das Feld "info" wird voraussichtlich immer die meisten/relevantesten Informationen enthalten. Deswegen soll es am breitesten werden.
Dein Konzept hat imho schon vom Grundsatz her einen "Fehler", denn eine (Mindest-)Viewportbreite von 1.200px vorauszusetzen, ist "nicht zeitgemäß" und somit nicht angebracht.
Es gibt im Wesentlichen auch 2 Alternativen zur Verwendung von Float:
1. display: table[-row|-cell]
2. display: inline-blockZu diesem Thema gibt es auch bereits etliche Threads hier im Forum (die Suchfunktion ist dein Freund), wo du weitere und ausführliche Informationen zu dem Thema findest.
Ich hoffe ihr könnt mir helfen...
Ich hoffe, das hilft dir weiter ...?
Gruß Gunther
-
spontan denke ich, dass du eins, zwei, drei von links floaten lassen kannst, sechs und fünf von rechts. Dann müsste vier ohne float- und Breitenangabe den restlichen Platz einnehmen.
Gib vier dann den display:table-cell, damit es sich unterhalb der floatenden Bereiche nicht verbreitert.
Und ja, das ach so wichtige vier kommt dann bei schmalen Viewports ganz zuletzt. Aber das war ja nicht deine Frage.
Gast