html - 更改列宽

Question

我目前创建了一个并排的两列 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 &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>

这是我的 jsfiddle:http://jsfiddle.net/huskydawgs/zhckr47h/3/

Answer 1

有几种方法可以使用 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>