Wie wird die Breite in Prozent div zugewiesen?

Ich habe main div und innerhalb, dass ich 3 divs habe und jede einzelne Breite in Prozent haben. Also habe ich Divs mit 20%, 80% bzw. 100% bekommen. Mit ihnen bis jetzt arbeitend begriff ich, dass, wenn ich dann Breite von 200% alle zusammen dann gegeben habe, teilt es Browserbreite in zwei gleiche Teile und die erste Hälfte wird 100% und anderes 100% betrachtet. Dann geschieht Rest der prozentualen Verteilung. Ich bin neu in CSS, möchte das aber klarstellen. Ist mein Verständnis korrekt und deshalb funktioniert mein Code korrekt? Gibt es einen Nachteil dabei?Wie wird die Breite in Prozent div zugewiesen?

.main { 
 
    font-size: larger; 
 
    font-weight: bold; 
 
} 
 

 
.column1 { 
 
    position: relative; 
 
    line-height: 30px; 
 
    width: 20%; 
 
    text-align: left; 
 
} 
 

 
.column2 { 
 
    width: 80%; 
 
} 
 

 
.column3 { 
 
    position: relative; 
 
    width: 100%; 
 
    float: right; 
 
    text-align: right; 
 
} 
 

 
.clear-both { 
 
    clear: both; 
 
} 
 

 
.row { 
 
    border-width: 2px; 
 
    border-bottom-color: #f4f4f4; 
 
    border-style: none; 
 
    position: relative; 
 
    line-height: 30px; 
 
    border-bottom-style: solid; 
 
    margin-top: 0.2%; 
 
    font-weight: normal; 
 
    font-size: 12px; 
 
    display: flex; 
 
}

<div class="row main"> 
 

 
    <div class="column1">CODE</div> 
 

 
    <div class="column2 ">NAME</div> 
 
    <div class="column3">TOTAL</div> 
 
</div>

Quelle

2017-05-04 shahista inamdar

, was das Problem hier ist und was Sie erreichen wollen? –

Ich bekomme, was ich will, d. H. Ich möchte diese 3 Spalten in einer Zeile sein. Aber ich bin mir nicht sicher, ob dies der richtige Weg ist, und gibt es auch eine Möglichkeit, ui zu brechen, wenn ich es auf diese Weise mache, da meine Gesamtbreite 200% beträgt? –

behalten Sie Ihre Eltern div 100% nicht 200% .. 200% wie Breite sind für horizontale Websites oder Slider wie Dinge –

Sie falsch machen.

Behalten Sie die folgenden Punkte im Hinterkopf.

1- Parent/main div sollte die entsprechende Breite in Prozent oder Pixeln haben. Wenn Sie keine Breite zuweisen, wird die Breite abhängig vom Inhalt der Breite automatisch übernommen.

2- Wenn Sie width in Prozent den untergeordneten divs zuweisen (column1, column2 usw.), sollte die Summe der untergeordneten divs nicht 100% überschreiten. Wenn es dann überschritten wird, erhalten Sie keine gewünschten/geeigneten Ergebnisse.

3- Sie müssen floats oder display: inline-block verwenden, um alle untergeordneten divs/Elemente in einer Zeile zu platzieren.

.main { 
 
    font-size: larger; 
 
    font-weight: bold; 
 
    width: 100%; 
 
    max-width: 1140px; 
 
    margin: 0 auto; 
 
} 
 

 
.column1 { 
 
    position: relative; 
 
    line-height: 30px; 
 
    width: 20%; 
 
    text-align: left; 
 
    float: left; 
 
} 
 

 
.column2 { 
 
    width: 60%; 
 
    float: left; 
 
} 
 

 
.column3 { 
 
    position: relative; 
 
    width: 20%; 
 
    text-align: right; 
 
    float: left; 
 
}

<div class="row main"> 
 
    <div class="column1">CODE</div> 
 

 
    <div class="column2 ">NAME</div> 
 
    <div class="column3">TOTAL</div> 
 
</div>

Wenn Sie Polsterung oder Grenzen verwenden, dann müssen Sie Box-Sizing verwenden: border-box.

Quelle

2017-05-04 09:41:58

wenn Sie Flexbox verwenden, macht es für Sie klarere statt mit float gemischten s mit position,

body { 
 
    margin: 0 
 
} 
 

 
.main { 
 
    font-size: larger; 
 
    font-weight: bold; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.column1 { 
 
    flex: 0 20%; 
 
    background: red 
 
} 
 

 
.column2 { 
 
    flex: 0 80%; 
 
    background: green 
 
} 
 

 
.column3 { 
 
    flex: 0 100%; 
 
    background: yellow 
 
}

<div class="main"> 
 
    <div class="column1">CODE</div> 
 
    <div class="column2 ">NAME</div> 
 
    <div class="column3">TOTAL</div> 
 
</div>

EDIT OPs Kommentar

Ich möchte diese 3 Spalten in einer Zeile sein. Ich arbeite auch mit meinem Code, aber Gesamtbreite der Hauptdiv ist 200%. gibt es eine Möglichkeit, von ui zu brechen, wenn ich es tun auf diese Weise

Sie auf diese Weise tun können:

body { 
 
    margin: 0 
 
} 
 

 
.main { 
 
    font-size: larger; 
 
    font-weight: bold; 
 
    display: flex 
 
} 
 

 
.column1, 
 
.column3 { 
 
    flex: 0 20%; 
 
    background: yellow 
 
} 
 

 
.column2 { 
 
    flex: 1; 
 
    background: green 
 
}

<div class="main"> 
 
    <div class="column1">CODE</div> 
 
    <div class="column2 ">NAME</div> 
 
    <div class="column3">TOTAL</div> 
 
</div>

Quelle

2017-05-04 09:37:51 dippas

Ich möchte diese 3 Spalten in einer Zeile sein. Ich arbeite auch mit meinem Code, aber die Gesamtbreite des Hauptdivs beträgt 200%. Gibt es eine Möglichkeit, ui zu brechen, wenn ich es auf diese Weise mache –

Ok. Sie müssen die Gesamtzahl der untergeordneten divs weiterhin auf 100% beschränken. Die Gesamtbreite von column1, column2 und column3 sollte in keinem Fall größer als das übergeordnete div sein. –

@shahistainamdar siehe aktualisierte Antwort – dippas

Sie können bootstrap Grid-System verwenden.

Rastersysteme werden zum Erstellen von Seitenlayouts durch eine Reihe von Zeilen und Spalten verwendet, die Ihren Inhalt enthalten.

So können Sie ganz einfach Ihr Layout verwalten je nachdem, welches Gerät Sie verwenden:

.col-lg * Klassen große bis große Geräte beziehen.
.col-md * Klassen beziehen sich auf mittelgroße Geräte.
.col-xs * Klassen beziehen sich auf kleine Geräte.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-md-2 col-xs-2 bg-warning">CODE</div> 
 
    <div class="col-md-10 col-xs-10 bg-primary">NAME</div> 
 
    <div class="col-md-12 col-xs-12 bg-success">TOTAL</div> 
 
</div>

Quelle

2017-05-04 09:45:02

Wie wird die Breite in Prozent div zugewiesen?

Antwort

Verwandte Themen