我目前创建了一个并排的两列div,每个div为50%。我试图找出如何使左div 70%和右div 30%。
此外,除了2列div。如果我想创建一个25%的每个25%的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>
使用display:inline-block
而不是float
。这消除了你的其他divs
的需要。使用margin-right:-4px
删除元素之间的空间。如果您想挖掘它们,还有其他一些问题需要解决。 Float
有它的位置,但我发现它导致的问题多于解决的问题。
.col1 {
display:inline-block;
width: 30%;
padding:0;
margin:0;
margin-right:-4px;
vertical-align:top;
background-color:yellow;
}
只需相应更改width
为col2
。
见JSfiddle:https://jsfiddle.net/zhckr47h/12/
如果不仔细调整代码,这很容易做到。但首先摆脱浮动,而是显示内联块和垂直对齐:顶部。
这是一个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 “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>
我用left
s更改了right
和margin
属性,以便于计算。所以70-30布局的新宽度必须是:70% - 4%(边距)= 66%和30% - 4%(边距)= 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 “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>