我目前创建了一个并排的两列 div,每个 div 占 50%。我正在尝试弄清楚如何使左侧 div 占 70%,右侧 div 占 30%。
此外,除了 2 列 div。如果我想创建一个 4 个 25% 的 col div 和一个 20% 的五列 div。我该怎么做?
.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;
}
<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 “health is wealth.” 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, “an apple a day keeps the doctor away.”</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>
这是我的 jsfiddle:http://jsfiddle.net/huskydawgs/zhckr47h/3/
最佳答案
有几种方法可以使用 CSS Grid 创建多列布局。
这是一种方法,具有 grid-template-columns
属性和灵活的 (fr
) 长度。
article {
display: grid;
grid-template-rows: 75px;
grid-gap: 10px;
}
article:nth-child(1) {
grid-template-columns: 7fr 3fr;
}
article:nth-child(2) {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
article:nth-child(3) {
grid-template-columns: repeat(5, 1fr);
}
/* demo styles only */
article { margin-bottom: 2em; }
section:nth-child(odd) { background-color: lightgreen; }
section:nth-child(even) { background-color: orange; }
<article>
<section></section>
<section></section>
</article>
<article>
<section></section>
<section></section>
<section></section>
<section></section>
</article>
<article>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</article>
关于html - 更改列宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32019782/