更改列宽

Question

我目前创建了一个并排的两列 div，每个 div 占 50%。我正在试图弄清楚如何使左 div 70% 和右 div 30%。

此外，除了 2 列 div。如果我想创建一个 4 col div，每个 25% 和一个 5 column div，每个 20%。我该怎么做？

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

Answer 2

使用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/

Answer 3

无需过多调整代码，这很容易做到。但首先摆脱浮动，而是显示 inline-block 和 vertical-align:top。

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

我已将left 和right 属性更改为margins，以便于计算。因此，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>