positionnement trois éléments dans div

Mon problème est illustré dans l'exemple de code fourni à la fin. Fondamentalement, j'ai un conteneur div contenant des outils à gauche, et le contenu principal au milieu, et quelques outils à droite (L'outil visuel gauche est de fournir le glisser et l'outil visuel correct est de supprimer le contenu). J'ai atteint la position en flottant à gauche et à droite respectivement, cependant, si je mets la couleur de fond sur le contenu principal, la coloration déborde sur les trucs flottant sur la gauche mais pas sur la droite (actuellement seulement testé dans firefox 3.5)positionnement trois éléments dans div

code ci-dessous:

<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>

Source

2009-08-23 FurtiveFelon

Voir ce qui se passe lorsque vous ajoutez '* {border: solid 1px black}' à votre style. – voyager

je pouvais obtenir ce que vous voulez avec

<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>

Mais est loin d'être bon.

Source

2009-08-23 19:59:43 voyager

Si votre intention est de fournir la couleur d'arrière-plan uniquement à l'élément désigné par la classe « .main » vous aurez besoin de faire les modifications suivantes à votre balisage HTML et CSS:

Déplacer l'élément désigné à la classe "main" entre celles marquées "handle" et "delete".

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

Ajouter "float: left" aux styles ".main"

.main{ 
    ... 
    float:left; 
}

S'il vous plaît noter que vous avez une faute de frappe dans votre deuxième exemple. La couleur d'arrière-plan devrait être "#ccc" au lieu de "ccc".

Source

2009-08-23 21:51:10

Il n'est pas clair si vous voulez que la couleur les couvre tous (gauche, principal, & à droite) .. ou seulement la div du milieu.

Quoi qu'il en soit .. si vous voulez couvrir tous .. vous devez faire la largeur de la div principale est égale à la largeur du conteneur .. essayer, par exemple

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

d'autre part , si vous voulez que la couleur soit dans la principale div seulement, alors vous devez faire flotter à gauche .. quelque chose comme ça

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

Source

2009-08-23 23:20:32 Aziz

Ajout float: left à la .main fixerai.

Téléchargez l'addon Firefox ColorZilla ou Firebug et vous verrez ce qui se passe. Votre .handle est flottant à gauche dans votre .main, c'est pourquoi l'arrière-plan est #ccc.

Source

2009-08-23 23:35:54 Martin

positionnement trois éléments dans div

Répondre

Questions connexes