Positionieren von drei Elementen in div

Mein Problem ist im Beispielcode am Ende dargestellt. Im Grunde habe ich einen div-Container, der links einige Werkzeuge und in der Mitte den Hauptinhalt und rechts einige Werkzeuge enthält (Das linke linke Werkzeug dient zum Ziehen und das visuelle rechte Werkzeug zum Löschen des Inhalts). Ich habe das Setzen erreicht, indem ich links und rechts schwebte, aber wenn ich Hintergrundfarbe auf den Hauptinhalt lege, überspringt die Färbung auf das links schwebende Zeug, aber nicht auf der rechten Seite (derzeit nur in Firefox 3.5 getestet)Positionieren von drei Elementen in div

Code unten:

<head> 
    <style type="text/css"> 
    #container{ 
     width:500; 
    } 
    .handle{ 
     float:left; 
    } 
    .delete{ 
     float:right; 
    } 
    .main{ 
     width:450; 
     background-color:ccc; 
    } 
    </style> 
</head> 
<div id="container"> 
<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as asd fasd fas dfa sdf asdf as dfas df dasf asd fas df asdf asdf asd fasd fasdf asdf asdf asdf as df asdf asdf asd fas df asdpf asdf asdf asd fas dfa sdf asdf asd fas df</p></div> 

<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div> 
</div>

Quelle

2009-08-23 FurtiveFelon

Sehen Sie, was passiert, wenn Sie '* {border: solid 1px black}' zu Ihrem Stil hinzufügen. – voyager

konnte ich bekommen, was Sie mit

wollen

<style type="text/css"> 
*{border:solid 1px black} 
#container{ 
    width:500px; 
} 
.handle{ 
    float:left; 
} 
.delete{ 
    position:relative; 
    right:50px; 
    float:right; 
} 
.main{ 
    width:390px; 
    padding:9px 30px; 
    background-color:ccc; 
} 
</style>

aber ist noch lange nicht gut.

Quelle

2009-08-23 19:59:43 voyager

Wenn Ihre Absicht ist nur Hintergrundfarbe zur Verfügung zu stellen, um das Element mit der „.main“ Klasse bezeichnet werden Sie die folgenden Änderungen an dem HTML-Markup und CSS tun müssen:

Bewegen Sie das Element mit dem designierten "main" -Klasse zwischen den mit "handle" und "delete" markierten.

<div class="c"> 
<p class="handle">...</p> 
<p class="main">...</p> 
<p class="delete">...</p> 
</div>

Add "float: left" auf die Stile in ".main"

.main{ 
    ... 
    float:left; 
}

Bitte beachten Sie, dass Sie einen Tippfehler in Ihrem zweiten Beispiel haben. Die Hintergrundfarbe sollte "#ccc" anstelle von "ccc" sein.

Quelle

2009-08-23 21:51:10

Es ist nicht klar, ob die Farbe sie alle abdecken soll (links, Haupt, & rechts) .. oder nur das mittlere div.

Wie auch immer .. Wenn Sie es wollen, dass alle decken .. Sie benötigen die Breite des Haupt-div zu machen ist gleich die Breite des Behälters .. versuchen, dies zum Beispiel

.main{ 
    width:500; 
    background-color:ccc; 
}

auf der anderen Seite wenn Sie die Farbe sein, in der Haupt div nur wollen, dann müssen Sie es auf der linken Seite .. wie dieser

.handle{ 
    float:left; 
    clear: left; 
} 
.delete{ 
    float:right; 
    clear: right; 
} 
.main{ 
    width:450; 
    background-color:ccc; 
    float: left; 
}

Quelle

2009-08-23 23:20:32 Aziz

Hinzufügen float etwas schwimmend machen: zum .main repariere es verlassen haben.

Laden Sie das ColorZilla Firefox-Addon oder Firebug herunter und Sie werden sehen, was passiert. Ihr .handle befindet sich links von Ihrer .main, weshalb der Hintergrund #ccc ist.

Quelle

2009-08-23 23:35:54 Martin

Positionieren von drei Elementen in div

Antwort

Verwandte Themen