更改列宽

问题描述 投票:5回答:4

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

html css css3 multiple-columns
4个回答
2
投票

有几种使用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>

0
投票

使用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;
    }

只需相应更改widthcol2

见JSfiddle:https://jsfiddle.net/zhckr47h/12/


0
投票

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

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

0
投票

我用lefts更改了rightmargin属性,以便于计算。所以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>
© www.soinside.com 2019 - 2024. All rights reserved.