So zentrieren Sie Elemente horizontal mit gleichen Breiten relativ zur verfügbaren Breite des übergeordneten Containers

Ich habe ein Container-Div, das eine beliebige Anzahl von Widgets enthält. Ich möchte die Breite jedes Widget automatisch anpassen, so dass jedes Widget die gleiche Menge an horizontalem Speicherplatz innerhalb der Container-Div. Sehr ähnlich wie eine herkömmliche Tabelle mit Zellen funktioniert.So zentrieren Sie Elemente horizontal mit gleichen Breiten relativ zur verfügbaren Breite des übergeordneten Containers

Wenn ich es mathematisch auszudrücken, würde die Formel ...

sein

widget-width = container-width/number-of-containers)

Mein Markup unter

<div class="pre-footer"> 
    <div class="single widget_text"> 
     <h4>Widget Heading</h4>   
     <div class="textwidget">Widget text goes here.</div> 
    </div>  
    <div class="single widget_text"> 
     <h4>Widget Heading</h4>   
     <div class="textwidget">Widget text goes here.</div> 
    </div>  
    <div class="single widget_text"> 
     <h4>Widget Heading</h4>   
     <div class="textwidget">Widget text goes here.</div> 
    </div>  
</div>

In diesem Beispiel ist die "pre-footer" div ist die Hauptcontainer und seine Breite ist im CSS als 900 Pixel definiert. Da es 3 Kind-Divs (single widget-text) gibt, möchte ich, dass jeder von diesen etwa 300 Pixel Breite belegt.

Quelle

2010-12-19 Scott B

Das Widget Breite ein Prozentsatz sein sollte, aber wie Sie als Antwort auf stealthyninja Antwort sagen, Sie Ich weiß nicht im Voraus, welcher%. CSS kann die Breite für Sie nicht berechnen, also müssen Sie das mit etwas anderem machen. Der offensichtlichste Ansatz scheint, dass Sie ein Stück JavaScript (JQuery) den css-Wert anpassen lassen, sobald sich die Anzahl der Widgets ändert. so etwas wie diese:

var numberOfWidgets = X; 
var widgetWidth = Math.floor(100/numberOfWidgets); 
$("div.single").css({"width": widgetWidth + "%"});

Alternativ können Sie auf einem Postbacks dies in asp.net oder PHP tun und den Widgets einen Inline-Stil geben:

width:xxxx%;

Quelle

2010-12-20 08:40:40 Bazzz

Danke Bazzz. Dies ist wahrscheinlich die beste verfügbare Lösung. Und ich verstehe CSS kann keine numerische Berechnung (mindestens eine, die nicht von den Interna des Browsers gesteuert wird). Ich hoffte, dass es eine CSS-Eigenschaft oder -Combo gab, die ich vermisste, die die untergeordneten Elemente eines Containers basierend auf der verfügbaren Breite des übergeordneten Containers mit gleichen Breiten zuweisen konnte. –

Leider nicht, können Sie die Breite eines Elements relativ zu der Breite der Eltern festlegen, aber nicht relativ zur Breite der Geschwister oder der Anzahl der Geschwister, die es hat. Vielleicht wird dies in CSS3 implementiert, Daumen drücken. :) – Bazzz

beste Antwort bis css3 Ich nehme an. Danke Bazzz :) –

@ Scott B: Man könnte so etwas tun -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title></title> 

<style type="text/css"> 
.pre-footer { 
    background-color: grey; 
    overflow: hidden; 
    width: 900px; 
} 
.single { 
    float: left; 
    width: 33%; 
} 
</style> 
</head> 

<body> 

<div class="pre-footer"> 
    <div class="single widget_text" style="background-color: red"> 
     <h4>Widget Heading 1</h4> 
     <div class="textwidget">Widget text goes here.</div> 
    </div>  
    <div class="single widget_text" style="background-color: yellow"> 
     <h4>Widget Heading 2</h4> 
     <div class="textwidget">Widget text goes here.</div> 
    </div>  
    <div class="single widget_text" style="background-color: blue"> 
     <h4>Widget Heading 3</h4>  
     <div class="textwidget">Widget text goes here.</div> 
    </div> 
</div> 

</body> 
</html>

jsFiddle Link: http://jsfiddle.net/Maats/

Quelle

2010-12-19 22:23:04 stealthyninja

Dank für die Eingabe und Ihren Vorschlag von 33% Breite funktioniert, wenn es 3 Divs gibt. Die Anzahl der untergeordneten Divs liegt jedoch vollständig beim Endbenutzer. Mein Beispiel hat 3, aber sie könnten 1,2,3,4 usw. haben ... –

So zentrieren Sie Elemente horizontal mit gleichen Breiten relativ zur verfügbaren Breite des übergeordneten Containers

Antwort

Verwandte Themen