• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div Containe auf Breite aufteilen

unique24

Mitglied
Hallo,

wie kann ich folgende DIV Container:
HTML:
<div class="groupinfo">
   <div class="appbox">
      <div class="appbox-title">Feld1</div>
   </div>
   <div class="appbox">
      <div class="appbox-title">Feld2</div>
   </div>
   <div class="appbox">
      <div class="appbox-title">Feld3</div>
   </div>
   <div class="appbox">
      <div class="appbox-title">Feld4</div>
   </div>
   <div class="appbox">
      <div class="appbox-title">Feld5</div>
   </div>
</div>

Auf die verfügbare Breite (100%) gleich aufteilen und wenn man die Seite in der Größe ändert, diese auf einen Minimalwert verkleinert und dann auf eine Zeile darunter verschiebt?
Responsive Layout nennt sich das denk ich?

Ich habe die CSS so:
HTML:
.groupinfo:after {
    content:"";
    box-sizing: inherit;
    display: table;
    clear: both;
    margin: 10px;
}

.appbox {
    float: left;
    box-sizing: inherit;
    width: 17.4%;
    min-width: 80px;
    text-align:center;
    padding:10px;
    margin-right: 8px;
    margin-bottom: 8px;
    vertical-align:top;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background-color:rgba(6,153,250,0.1);
}

Das funktioniert soweit auch ... aber:
1. ist es nicht immer auf die volle Breite
2. Am iPad bricht er mir das letzte Feld um, wobei es von der Pixelbreite eigentlich reichen sollte.

Danke!
 
Werbung:
Nimm ein Liste <ul> und nein, responsive Design ist es nicht.
Code:
ul , li {
margin:0;
padding:0;
list-style:none;
}

li {
float:left;
width:20%;
min-width:80px;
padding:5px;
box-sizing:border-box;
}

li h3 {
margin:0;
padding:5px;
border:1px solid #000;
border-radius:20px;
font-weight:normal;
}

Code:
<ul>
<li><h3>feld1</h3></li>
<li><h3>feld2</h3></li>
<li><h3>feld3</h3></li>
<li><h3>feld4</h3></li>
<li><h3>feld5</h3></li>
</ul>

Besser wär Flexbox. Einfach mal googeln.
 
Zuletzt bearbeitet:
Hallo

1. ist es nicht immer auf die volle Breite

Wenn 5 Container die volle Breite einnehmen sollen muss jeder 20% breit sein.

2. Am iPad bricht er mir das letzte Feld um, wobei es von der Pixelbreite eigentlich reichen sollte.

Je nach Box-Modell musst du padding, border und margin in die Breite hineinberechnen.

Um verschiedene Einheiten zu berechnen gibt es in CSS die Berechnungsmöglichkeit calc.

Für Berechnungen fehlen leider entscheidende Informationen.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben