colonne Allign de blocs DIV de côté d'un autre bloc DIV

Je veux allign bloc div dans ce Maner:colonne Allign de blocs DIV de côté d'un autre bloc DIV

 
+-----+------+ 
|first|second| 
|  |  | 
+  +------+ 
|  |third | 
|  |  | 
+-----+------+

Mais le code suivant il allign d'une autre manière:

<html> 
    <head> 
     <style> 
      .common 
      { 
       border: 1px solid black; 
       float: left; 
      } 

      #first 
      { 
       background: red; 
       height: 100px; 
       width: 50px; 
      } 

      #second 
      { 
       background: green; 
       height: 50px; 
       width: 50px; 
      } 

      #third 
      { 
       background: yellow; 
       height: 50px; 
       width: 50px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="common" id="first">first</div> 
     <div class="common" id="second">second</div> 
     <div class="common" id="third">third</div> 
    </body> 
</html>

Je n'utiliserai pas le positionnement absolu.
Existe-t-il un autre moyen de le faire?

Merci pour votre intérêt.

Source

2010-11-26 rodnower

Vous pouvez envelopper la deuxième et la troisième dans un conteneur div et faire flotter le conteneur et d'abord.

#first { 
    float: left; 
} 

#container { 
    float: left; 
} 

... 

<div id="first></div> 
<div id="container"> 
    <div id="second"></div> 
    <div id="third"></div> 
</div>

Source

2010-11-26 18:53:48 digitaldreamer

flotteur la première à gauche

et en deuxième et troisième de la marge de la largeur de la première

Source

2010-11-26 18:56:34 PeeHaa

Here ya go: http://jsfiddle.net/4CD2s/

#first { 
    background: green; 
    float: left; 
    height: 300px; 
    width: 100px; 
} 
#second { 
    background: grey; 
    height: 100px; 
    margin-left: 105px; 
    width: 100px; 
} 
#third { 
    background: grey; 
    height: 100px; 
    margin: 5px 0 0 105px; 
    width: 100px; 
} 

<div id="first">First</div> 
<div id="second">Second</div> 
<div id="third">Third</div>

Source

2010-11-26 18:59:06

vous pouvez utiliser une largeur de div wrapper fixe avec et débordement: caché pour empêcher l'effondrement

en direct exemple: http://jsbin.com/isuse4

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org 
    /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#wrapper {width:150px; overflow:hidden;} 
.common { 
    border: 1px solid black; 
    float: left; 
} 
#first { 
    background: red; 
    height: 100px; 
    width: 50px; 
} 
#second { 
    background: green; 
    height: 50px; 
    width: 50px; 
} 
#third { 
    background: yellow; 
    height: 50px; 
    width: 50px; 
} 
</style> 
</head> 

<body> 
<div id="wrapper"> 
    <div class="common" id="first">first</div> 
    <div class="common" id="second">second</div> 
    <div class="common" id="third">third</div> 
</div> 
</body> 
</html>

Source

2010-11-26 18:59:33 Sotiris

La meilleure façon que je sais faire est avec 4 conteneurs:

+-----+------+ 
|first|second| 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
+-----+------+

puis créez deux plus à l'intérieur du second récipient:

+-----+--------+ 
|first|second | 
|  | +----+ | 
|  | |3rd | | 
|  | | | | 
|  | +----+ | 
|  | |4th | | 
|  | | | | 
|  | +----+ | 
|  |  | 
+-----+--------+

Flotter le 1er et se cond. Ne donnez pas de style visuel au deuxième conteneur, positionnez-le simplement. Placez les 3e et 4e contenants à l'intérieur du 2e au besoin. Aucune marge supplémentaire sur les conteneurs "intérieurs" et ils rempliront l'espace de la seconde, de sorte que le deuxième conteneur est vraiment un guide invisible pour aider à les mettre où ils vont, le positionnement seulement.

Je préfère cette méthode car elle évite les bizarreries de marges, et tout ce que vous avez à faire pour ajuster la position des deux petits conteneurs (3ème et 4ème) est d'ajuster la position de la 2ème, ils bougent avec elle régulièrement.

Source

2010-11-26 19:00:44

colonne Allign de blocs DIV de côté d'un autre bloc DIV

Répondre

Questions connexes