allign Spalte von DIV-Blöcke von der Seite eines anderen DIV-Block

Ich möchte div Block in solchen maner allign:allign Spalte von DIV-Blöcke von der Seite eines anderen DIV-Block

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

Aber der folgende Code allign es auf andere Weise:

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

Ich werde keine absolute Positionierung verwenden.
Gibt es einen anderen Weg, es zu tun?

Vielen Dank für die Zukunft.

Quelle

2010-11-26 rodnower

Sie können zweite und dritte in einem Container div und den Container und zuerst schwimmen.

#first { 
    float: left; 
} 

#container { 
    float: left; 
} 

... 

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

Quelle

2010-11-26 18:53:48 digitaldreamer

float links erste

und geben zweiten und dritten der Rand der Breite des ersten

Quelle

2010-11-26 18:56:34 PeeHaa

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

Quelle

2010-11-26 18:59:06

Sie einen Wrapper div Breite verwenden können behoben mit und Überlauf: versteckt, um einen Kollaps zu verhindern

live Beispiel: 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>

Quelle

2010-11-26 18:59:33 Sotiris

Der einfachste Weg, ich weiß, dies zu tun, ist mit 4 Behältern:

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

dann zwei weitere im Inneren des zweiten Behälters erstellen:

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

Float der 1. und se Kond. Geben Sie dem zweiten Behälter keinen visuellen Stil, positionieren Sie ihn einfach. Platzieren Sie bei Bedarf den 3. und 4. Behälter in den 2. Behälter. Keine zusätzlichen Ränder auf den "inneren" Behältern und sie füllen den Raum der Sekunde, also ist der zweite Behälter wirklich eine unsichtbare Anleitung, um zu helfen, sie dorthin zu bringen, wo sie gehen und nur positionieren.

Ich bevorzuge diese Methode, weil es Marginalien vermeidet, und alles, was Sie tun müssen, um die Position der beiden kleinen Behälter (3. und 4.) anzupassen, ist die Position des 2., Sie bewegen sich mit ihm konsequent.

Quelle

2010-11-26 19:00:44

allign Spalte von DIV-Blöcke von der Seite eines anderen DIV-Block

Antwort

Verwandte Themen