Jak dostosować procent szerokości moich dwóch kolumn div?

Question

Obecnie utworzyłem kolumnę div po dwóch stronach obok siebie po 50% dla każdego elementu div. Próbuję dowiedzieć się, jak zrobić lewe div 70%, a prawo div 30%.

Ponadto oprócz 2 kolumn div. Jeśli chciałem utworzyć 4-bitowe divy po 25% każda i pięciokolumnowe div po 20% każda. Jak to zrobić?

Oto mój jsfiddle: http://jsfiddle.net/huskydawgs/zhckr47h/3/

Tu jest mój 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

Zastosowanie display:inline-block zamiast float. Eliminuje to potrzebę twojego innego divs. Usuń przestrzeń pomiędzy elementami, używając margin-right:-4px. Są jeszcze inne poprawki tego problemu, jeśli chcesz je dla nich wykopać. Float ma swoje miejsce, ale uważam, że powoduje więcej problemów niż rozwiązuje.

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

Wystarczy zmienić width odpowiednio dla col2.

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

Answer 2

prosty sposób budować różne układy wielu kolumn żądasz jest z CSS Flexbox.

Zwracając się do pierwszej części Twojego pytania ...

Próbuję dowiedzieć się, jak zrobić lewy div 70% i prawy div 30%.

... tutaj są dwa elementy div, jeden o szerokości 70%, a drugi o wartości 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

---

Gdybym chciał stworzyć 4 div COL z 25% każdy, a div pięć kolumna 20 % każdy. Jak to zrobić?

Aby uzyskać więcej kolumn, należy dodać więcej elementów div. Następnie dostosuj ich procentową szerokość.Oto cztery kolumny na poziomie 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

---

Zauważ, że schematu flexbox jest obsługiwana przez wszystkich głównych przeglądarek, except IE 8 & 9. Niektóre najnowsze wersje przeglądarek, takie jak Safari 8 i IE10, wymagają vendor prefixes. Aby szybko dodać wszystkie potrzebne prefiksy, umieść swój arkusz CSS w lewym panelu: Autoprefixer.

Answer 3

Bez zbytniego podkręcania kodu jest to łatwe. Najpierw jednak pozbywaj się elementów pływających, a zamiast tego wyświetlaj blok inline i vertical-align: top.

Oto 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

Zmieniłem left i right właściwości z margin s dla łatwiejszych obliczeń. Tak więc nowe szerokości dla układu 70-30 muszą wynosić: 70% - 4% (marginesy) = 66% i 30% - 4% (marginesy) = 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>