Wie Sie sich richtig ein div in Spalten aufgeteilt und Reihen

-1

Ich brauche eine div Struktur auf diese Weise zu schaffen gemacht:Wie Sie sich richtig ein div in Spalten aufgeteilt und Reihen

Dies ist, was ich getan habe:

body { 
 
    background-color: #e9e9e9; 
 
} 
 
p { 
 
    margin: 0 
 
} 
 
#all { 
 
    background: black; 
 
} 
 
#left { 
 
    float: left; 
 
    padding: 5px; 
 
    background: blue; 
 
    width: 200px; 
 
} 
 
#leftUp { 
 
    opacity: 0.8; 
 
    background-color: pink; 
 
    width: 100%; 
 
    height: 50%; 
 
    padding: 5px; 
 
} 
 
#leftDown { 
 
    opacity: 0.8; 
 
    background-color: indigo; 
 
    width: 100%; 
 
    height: 50%; 
 
    padding: 5px; 
 
} 
 
#center { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    background: red; 
 
    width: 620px; 
 
} 
 
#centerUp { 
 
    opacity: 0.8; 
 
    background-color: orange; 
 
    width: 100%; 
 
} 
 
#centerDown { 
 
    opacity: 0.8; 
 
    background-color: yellow; 
 
    width: 620px; 
 
    height: 620px; 
 
} 
 
#right { 
 
    float: right; 
 
    padding: 5px; 
 
    background: green; 
 
} 
 
#rightUp { 
 
    opacity: 0.8; 
 
    background-color: #9ACD32; 
 
    width: 100%; 
 
    height: 50%; 
 
} 
 
#rightDown { 
 
    opacity: 0.8; 
 
    background-color: #00FF00; 
 
    width: 100%; 
 
    height: 50%; 
 
}

<div id="all"> 
 

 
    <div id="left"> 
 
    <div id="leftUp"> 
 
     <div id="selector"> 
 
     <form id="abcd"> 
 
      <input type="radio" name="ab" value="Bringing Down the House" checked>Bringing Down the House 
 
      <br> 
 
      <input type="radio" name="ab" value="Metropolis">Metropolis 
 
      <br> 
 
      <input type="radio" name="ab" value="Fight Club">Fight Club 
 
      <br> 
 
      <input type="radio" name="ab" value="Ciclope Festival">Ciclope Festival 2014 
 
      <br> 
 
      <input type="radio" name="ab" value="The Long Kiss Goodnight">The Long Kiss Goodnight 
 
      <br> 
 
      <input type="radio" name="ab" value="Date Night">Date Night 
 
      <br> 
 
      <input type="radio" name="ab" value="The Slums of Beverly Hills">The Slums of Beverly Hills 
 
     </form> 
 
     </div> 
 
    </div> 
 
    <div id="leftDown"> 
 
     <p>Hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown</p> 
 
    </div> 
 
    </div> 
 

 
    <div id="center"> 
 
    <div id="centerUp"> 
 
     <p>Hi, I'm centerUp</p> 
 
    </div> 
 
    <div id="centerDown" with="620px" heigth="620px"> 
 
     <p>Hi, I'm centerDown</p> 
 
    </div> 
 
    </div> 
 

 
    <div id="right"> 
 
    <div id="rightUp"> 
 
     <p>Hi, I'm rightUp</p> 
 
    </div> 
 
    <div id="rightDown"> 
 
     <p>Hi, I'm rightDown</p> 
 
    </div> 
 
    </div> 
 
</div>

JSfiddle here

Was ich bekomme ist anders als was ich möchte. Warum? Wie kann ich reparieren?

Wenn möglich, möchte ich alle diese divs behalten, weil ich sie brauche (ich muss einige Informationen hinzufügen).

Quelle

2016-06-18 ComeDown

eine sehr schnelle Demo mit [Positionierung ] (https://jsfiddle.net/zrrpa428/2/) – jbutler483

können Sie imbricate flex Boxen:

body { 
 
    background-color: #e9e9e9; 
 
} 
 
p { 
 
    margin: 0 
 
} 
 
#all { 
 
    background: black; 
 
    display: flex; 
 
    margin: auto; 
 
    max-width: 1200px; 
 
    min-height: 80vh; 
 
    /* demo purpose to show element stretch behavior */ 
 
} 
 
#left { 
 
    display: flex; 
 
    flex-flow: column; 
 
    padding: 5px; 
 
    background: blue; 
 
    width: 200px; 
 
} 
 
#leftUp { 
 
    opacity: 0.8; 
 
    background-color: pink; 
 
    flex: 1; 
 
    padding: 5px; 
 
} 
 
#leftDown { 
 
    opacity: 0.8; 
 
    background-color: indigo; 
 
    flex: 1; 
 
    ; 
 
    padding: 5px; 
 
} 
 
#center { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-flow: column; 
 
    padding: 5px; 
 
    background: red; 
 
} 
 
#centerUp { 
 
    background-color: orange; 
 
} 
 
#centerDown { 
 
    opacity: 0.8; 
 
    background-color: yellow; 
 
    flex: 1; 
 
} 
 
#right { 
 
    display: flex; 
 
    flex-flow: column; 
 
    padding: 5px; 
 
    background: green; 
 
    width: 200px; 
 
} 
 
#rightUp { 
 
    opacity: 0.8; 
 
    background-color: #9ACD32; 
 
    flex: 1; 
 
} 
 
#rightDown { 
 
    opacity: 0.8; 
 
    background-color: #00FF00; 
 
    flex: 1; 
 
}

<div id="all"> 
 

 
    <div id="left"> 
 
    <div id="leftUp"> 
 
     <div id="selector"> 
 
     <form id="abcd"> 
 
      <input type="radio" name="ab" value="Bringing Down the House" checked>Bringing Down the House 
 
      <br> 
 
      <input type="radio" name="ab" value="Metropolis">Metropolis 
 
      <br> 
 
      <input type="radio" name="ab" value="Fight Club">Fight Club 
 
      <br> 
 
      <input type="radio" name="ab" value="Ciclope Festival">Ciclope Festival 2014 
 
      <br> 
 
      <input type="radio" name="ab" value="The Long Kiss Goodnight">The Long Kiss Goodnight 
 
      <br> 
 
      <input type="radio" name="ab" value="Date Night">Date Night 
 
      <br> 
 
      <input type="radio" name="ab" value="The Slums of Beverly Hills">The Slums of Beverly Hills 
 
     </form> 
 
     </div> 
 
    </div> 
 
    <div id="leftDown"> 
 
     <p>Hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown</p> 
 
    </div> 
 
    </div> 
 

 
    <div id="center"> 
 
    <div id="centerUp"> 
 
     <p>Hi, I'm centerUp</p> 
 
    </div> 
 
    <div id="centerDown"> 
 
     <p>Hi, I'm centerDown</p> 
 
    </div> 
 
    </div> 
 

 
    <div id="right"> 
 
    <div id="rightUp"> 
 
     <p>Hi, I'm rightUp</p> 
 
    </div> 
 
    <div id="rightDown"> 
 
     <p>Hi, I'm rightDown</p> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-06-18 18:47:53

Sie können diesen mit flexbox

Hinweis erreichen, dass ich Ihren Code ein wenig, zum Beispiel gezwickt, float:left in CSS entfernt, entfernt die width/height HTML-Tags als veraltet und gelöscht duplizierten Eigenschaften, in einer Regel verbinden.

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    background-color: #e9e9e9; 
 
} 
 
p { 
 
    margin: 0 
 
} 
 
#all { 
 
    background: black; 
 
    display: flex 
 
} 
 
#left { 
 
    padding: 5px; 
 
    background: blue; 
 
    flex: 1 
 
} 
 
#leftUp, 
 
#leftDown { 
 
    opacity: 0.8; 
 
    width: 100%; 
 
    height: 50%; 
 
    padding: 5px; 
 
} 
 
#leftUp { 
 
    background-color: pink; 
 
} 
 
#leftDown { 
 
    background-color: indigo; 
 
} 
 
#center { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    background: red; 
 
    width: 620px; 
 
} 
 
#centerUp { 
 
    opacity: 0.8; 
 
    background-color: orange; 
 
    width: 100%; 
 
} 
 
#centerDown { 
 
    opacity: 0.8; 
 
    background-color: yellow; 
 
    height: calc(100% - 20px) 
 
} 
 
#right { 
 
    padding: 5px; 
 
    background: green; 
 
    flex: 1 
 
} 
 
#rightUp, 
 
#rightDown { 
 
    opacity: 0.8; 
 
    width: 100%; 
 
    height: 50%; 
 
} 
 
#rightUp { 
 
    background-color: #9ACD32; 
 
} 
 
#rightDown { 
 
    background-color: #00FF00; 
 
}

<div id="all"> 
 
    <div id="left"> 
 
    <div id="leftUp"> 
 
     <div id="selector"> 
 
     <form id="abcd"> 
 
      <input type="radio" name="ab" value="Bringing Down the House" checked>Bringing Down the House 
 
      <br> 
 
      <input type="radio" name="ab" value="Metropolis">Metropolis 
 
      <br> 
 
      <input type="radio" name="ab" value="Fight Club">Fight Club 
 
      <br> 
 
      <input type="radio" name="ab" value="Ciclope Festival">Ciclope Festival 2014 
 
      <br> 
 
      <input type="radio" name="ab" value="The Long Kiss Goodnight">The Long Kiss Goodnight 
 
      <br> 
 
      <input type="radio" name="ab" value="Date Night">Date Night 
 
      <br> 
 
      <input type="radio" name="ab" value="The Slums of Beverly Hills">The Slums of Beverly Hills 
 
     </form> 
 
     </div> 
 
    </div> 
 
    <div id="leftDown"> 
 
     <p>Hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown</p> 
 
    </div> 
 
    </div> 
 
    <div id="center"> 
 
    <div id="centerUp"> 
 
     <p>Hi, I'm centerUp</p> 
 
    </div> 
 
    <div id="centerDown"> 
 
     <p>Hi, I'm centerDown</p> 
 
    </div> 
 
    </div> 
 
    <div id="right"> 
 
    <div id="rightUp"> 
 
     <p>Hi, I'm rightUp</p> 
 
    </div> 
 
    <div id="rightDown"> 
 
     <p>Hi, I'm rightDown</p> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-06-18 18:43:02 dippas

Zwei Grund, warum Sie nicht bekommen, was Sie mit Ihrer Probe erwartet.

Zuerst sollte das gesamte schwebende Panel aufgerufen werden, bevor Sie das Panel zentriert haben.

Wenn die Größe des mittleren Bedienfelds größer als die Seitengröße ist, wird die Zeile erneut angezeigt.

für die Mittelkonsole nur die von CSS-Klasse ändern:

#center { 
     display: inline-block; 
     padding: 5px; 
     background: red; 
     width: 30%; 
     position:absolute; 
     }

ich Rat Sie die mit Ihrer Panel mit Prozent zu manipulieren. Ich gebe 30% in meine Probe, aber nur um Ihnen die gewünschte auszuwählen.

Quelle

2016-06-18 18:48:37

Wenn Sie kümmern sich nicht um Inhalte Hierarchie:

body { 
 
\t \t \t \t background-color: #e9e9e9; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t p { 
 
\t \t \t \t margin: 0 
 
\t \t \t } 
 

 
\t \t \t #all { 
 
\t \t \t \t background: black; 
 
\t \t \t } 
 

 
\t \t \t #left { 
 
\t \t \t \t float: left; 
 
\t \t \t \t padding: 5px; 
 
\t \t \t \t background: blue; 
 
\t \t \t \t width: 200px; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t #leftUp { 
 
\t \t \t box-sizing: border-box; 
 
\t \t \t \t opacity: 0.8; 
 
\t \t \t \t background-color: pink; 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t height: 50%; 
 
\t \t \t \t padding: 5px; 
 
\t \t \t } 
 

 
\t \t \t #leftDown { 
 
\t \t \t box-sizing: border-box; 
 
\t \t \t \t opacity: 0.8; 
 
\t \t \t \t background-color: indigo; 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t height: 50%; 
 
\t \t \t \t padding: 5px; 
 
\t \t \t } 
 

 
\t \t \t #center { 
 
\t \t \t \t display: block; 
 
     overflow: hidden; 
 
\t \t \t \t padding: 5px; 
 
\t \t \t \t background: red; 
 
\t \t \t \t /* width: 620px; */ 
 
\t \t \t } 
 

 
\t \t \t #centerUp { 
 
\t \t \t \t opacity: 0.8; 
 
\t \t \t \t background-color: orange; 
 
\t \t \t \t width: 100%; 
 
\t \t \t } 
 

 
\t \t \t #centerDown { 
 
\t \t \t \t opacity: 0.8; 
 
\t \t \t \t background-color: yellow; 
 
\t \t \t \t /* width: 620px; */ 
 
\t \t \t \t height: 620px; 
 
\t \t \t } 
 

 
\t \t \t #right { 
 
\t \t \t \t float: right; 
 
\t \t \t \t padding: 5px; 
 
\t \t \t \t background: green; 
 
\t \t \t } 
 

 
\t \t \t #rightUp { 
 
\t \t \t \t opacity: 0.8; 
 
\t \t \t \t background-color: #9ACD32; 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t height: 50%; 
 
\t \t \t } 
 

 
\t \t \t #rightDown { 
 
\t \t \t \t opacity: 0.8; 
 
\t \t \t \t background-color: #00FF00; 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t height: 50%; 
 
\t \t \t }

<body> 
 

 
    <div id="all"> 
 

 
    <div id="left"> 
 
     <div id="leftUp"> 
 
     <div id="selector"> 
 
      <form id="abcd"> 
 
      <input type="radio" name="ab" value="Bringing Down the House" checked>Bringing Down the House<br> 
 
      <input type="radio" name="ab" value="Metropolis">Metropolis<br> 
 
      <input type="radio" name="ab" value="Fight Club">Fight Club<br> 
 
      <input type="radio" name="ab" value="Ciclope Festival">Ciclope Festival 2014<br> 
 
      <input type="radio" name="ab" value="The Long Kiss Goodnight">The Long Kiss Goodnight<br> 
 
      <input type="radio" name="ab" value="Date Night">Date Night<br> 
 
      <input type="radio" name="ab" value="The Slums of Beverly Hills">The Slums of Beverly Hills 
 
      </form> 
 
     </div> 
 
     </div> 
 
     <div id="leftDown"> 
 
     <p>Hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown, hi, I'm leftDown</p> 
 
     </div> 
 
    </div> 
 
    
 
    <div id="right"> 
 
     <div id="rightUp"> 
 
     <p>Hi, I'm rightUp</p> 
 
     </div> 
 
     <div id="rightDown"> 
 
     <p>Hi, I'm rightDown</p> 
 
     </div> 
 
    </div> 
 

 
    <div id="center"> 
 
     <div id="centerUp"> 
 
     <p>Hi, I'm centerUp</p> 
 
     </div> 
 
     <div id="centerDown" with="620px" heigth="620px"> 
 
     <p>Hi, I'm centerDown</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body>

Ich weiß nicht, auch Vorlieben Ihre Dimensionen über ...

Quelle

2016-06-18 19:04:33

Wie Sie sich richtig ein div in Spalten aufgeteilt und Reihen

Antwort

Verwandte Themen