Wie stelle ich die prozentualen Breiten meiner zwei Spalten div ein?

Question

Ich habe zur Zeit eine zwei-Spalten-Div bei 50% jedes Div erstellt. Ich versuche herauszufinden, wie man das linke Div 70% und das richtige Div 30% macht.

Auch, zusätzlich zu den 2 Spalten Divs. Wenn ich eine 4 Spalten Divs von jeweils 25% und eine fünf Spalten Div von jeweils 20% erstellen wollte. Wie würde ich das tun?

Hier ist meine jsfiddle: http://jsfiddle.net/huskydawgs/zhckr47h/3/

Hier ist mein HTML:

<div class="container-2col"> 
    <div class="container-1col"> 
     <div class="col1"> 
      <p>Delicious and crunchy, apple fruit is one of the most popular and favorite fruits among the health conscious, fitness lovers who firmly believe in the concept of &ldquo;health is wealth.&rdquo; This wonderful fruit is packed with rich phyto-nutrients that, in the true sense, indispensable for optimal health. Certain antioxidants in apple have several health promoting and disease prevention properties, and thereby, truly justifying the adage, &ldquo;an apple a day keeps the doctor away.&rdquo;</p> 
     </div> 
     <div class="col2"> 
      <p>Vegetables, like fruits, are low in calories and fats but contain good amounts of vitamins and minerals. All the Green-Yellow-Orange vegetables are rich sources of calcium, magnesium, potassium, iron, beta-carotene, vitamin B-complex, vitamin-C, vitamin-A, and vitamin K.</p> 
     </div> 
    </div> 
</div> 

Here's my CSS: 

    .container-2col { 
    clear: left; 
    float: left; 
    width: 100%; 
    overflow: hidden; 
    background: none; 
} 

.container-1col { 
    float: left; 
    width: 100%; 
    position: relative; 
    right: 50%; 
    background: none; 
} 

    .col1 { 
     float: left; 
     width: 46%; 
     position: relative; 
     left: 52%; 
     overflow: hidden; 
    } 
    .col2 { 
     float: left; 
     width: 46%; 
     position: relative; 
     left: 56%; 
     overflow: hidden; 
    } 

Answer 1

Verwenden display:inline-block statt float. Dies beseitigt die Notwendigkeit für Ihre anderen divs. Entfernen Sie das Leerzeichen zwischen den Elementen, indem Sie margin-right:-4px verwenden. Es gibt weitere Korrekturen für dieses Problem, wenn Sie nach ihnen suchen möchten. Float hat seinen Platz, aber ich finde es verursacht mehr Probleme als es löst.

.col1 { 
    display:inline-block; 
    width: 30%; 
    padding:0; 
    margin:0; 
    margin-right:-4px; 
    vertical-align:top; 
    background-color:yellow; 
    } 

einfach die width für col2 entsprechend ändern.

See JSfiddle: https://jsfiddle.net/zhckr47h/12/

Answer 2

Eine einfache Art und Weise die verschiedenen mehrspaltigen Layouts Sie anfordern ist mit CSS Flexbox zu bauen.

den ersten Teil Ihrer Frage Adressierung ...

Ich versuche, herauszufinden, wie die linke div 70% und das Recht div 30% zu machen.

... hier sind zwei Divs, eine mit 70% Breite und die andere mit 30%.

HTML

<div id="container"> 
    <div id="bluebox"></div> 
    <div id="greenbox"></div> 
</div> 

CSS

#container { display: flex; } 
#bluebox { flex: 0 0 70%; } 
#greenbox { flex: 0 0 30%; } 

DEMO 1

---

Wenn ich eine 4 col divs von jeweils 25% und eine fünf Spalt div von 20 schaffen wollte % jeder. Wie würde ich das tun?

Für weitere Spalten fügen Sie weitere divs hinzu. Passen Sie dann ihre prozentuale Breite an.Hier sind vier Säulen bei 25%:

HTML

<div id="container"> 
    <div id="bluebox"></div> 
    <div id="greenbox"></div> 
    <div id="yellowbox"></div> 
    <div id="graybox"></div> 
</div> 

CSS

#container { display: flex; } 
#container > div { flex: 0 0 25%; } 

DEMO 2

---

Beachten Sie, dass Flexbox von allen gängigen Browsern unterstützt wird, except IE 8 & 9. Einige aktuelle Browserversionen wie Safari 8 und IE10 erfordern vendor prefixes. Um schnell alle gewünschten Präfixe hinzuzufügen, geben Sie Ihr CSS im linken Bereich hier ein: Autoprefixer.

Answer 3

Ohne Ihren Code so viel zu optimieren, ist dies einfach zu tun. Aber entfernen Sie zuerst die Floats und zeigen Sie stattdessen inline-block und vertical-align an: top.

Hier ist ein fiddle

.container-2col { 
 
    clear: left; 
 
    float: left; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background: none; 
 
    margin: 0!important; 
 
    padding: 0!important; 
 
} 
 
.col1, 
 
.col2 { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    position: relative; 
 
    background: none; 
 
    overflow: hidden; 
 
} 
 
.col1 { 
 
    width: 69.5%; 
 
} 
 
.col2 { 
 
    width: 30%; 
 
}

<div class="container-2col"> 
 
    <div class="container-1col"> 
 
    <div class="col1"> 
 
     <p>Delicious and crunchy, apple fruit is one of the most popular and favorite fruits among the health conscious, fitness lovers who firmly believe in the concept of &ldquo;health is wealth.&rdquo; This wonderful fruit is packed with rich phyto-nutrients 
 
     that, in the true sense, indispensable for optimal health. Certain antioxidants in apple have several health promoting and disease prevention properties, and thereby, truly justifying the adage, &ldquo;an apple a day keeps the doctor away.&rdquo;</p> 
 
    </div> 
 
    <div class="col2"> 
 
     <p>Vegetables, like fruits, are low in calories and fats but contain good amounts of vitamins and minerals. All the Green-Yellow-Orange vegetables are rich sources of calcium, magnesium, potassium, iron, beta-carotene, vitamin B-complex, vitamin-C, 
 
     vitamin-A, and vitamin K.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

Ich habe left und right Eigenschaften mit margin s für eine einfachere Berechnungen geändert. Die neuen Breiten für ein 70-30 Layout müssen also sein: 70% - 4% (Margen) = 66% und 30% - 4% (Margen) = 26%.

.container-2col { 
 
    clear: left; 
 
    float: left; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background: none; 
 
} 
 
.container-1col { 
 
    float: left; 
 
    width: 100%; 
 
    position: relative; 
 
    background: none; 
 
} 
 
.col1 { 
 
    float: left; 
 
    width: 66%; 
 
    margin: 0 2%; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.col2 { 
 
    float: left; 
 
    width: 26%; 
 
    margin: 0 2%; 
 
    position: relative; 
 
    overflow: hidden; 
 
}

<div class="container-2col"> 
 
    <div class="container-1col"> 
 
    <div class="col1"> 
 
     <p>Delicious and crunchy, apple fruit is one of the most popular and favorite fruits among the health conscious, fitness lovers who firmly believe in the concept of &ldquo;health is wealth.&rdquo; This wonderful fruit is packed with rich phyto-nutrients 
 
     that, in the true sense, indispensable for optimal health. Certain antioxidants in apple have several health promoting and disease prevention properties, and thereby, truly justifying the adage, &ldquo;an apple a day keeps the doctor away.&rdquo;</p> 
 
    </div> 
 
    <div class="col2"> 
 
     <p>Vegetables, like fruits, are low in calories and fats but contain good amounts of vitamins and minerals. All the Green-Yellow-Orange vegetables are rich sources of calcium, magnesium, potassium, iron, beta-carotene, vitamin B-complex, vitamin-C, 
 
     vitamin-A, and vitamin K.</p> 
 
    </div> 
 
    </div> 
 
</div>