Question

I currently created a side-by-side two column div at 50% each div. I'm trying to figure out how to make the left div 70% and the right div 30%.

Also, in addition to the 2 column divs. If I wanted to create a 4 col divs of 25% each and a five column div of 20% each. How would I do this?

.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>

Here's my 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>

Answer 2

如果不仔细调整代码，这很容易做到。但首先摆脱浮动，而是显示内联块和垂直对齐：顶部。

这是fiddle

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 3

我已将left和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 &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>

Changing column widths

3 个答案: