0

I am writing a HTML page consists of rows and columns in DIV elements.

Sometimes a row may only contain 1 column, some 2, and some 3, and I want to change the width of each column depending on how many columns there are in a row.

Here is my HTML examples here:

<!-- 1 column -->
<div class="row">
  <!-- Column will be 100% -->
  <div class="col"></div>
</div>

<!-- 2 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col"></div>

  <!-- Column will be 75% -->
  <div class="col"></div>
</div>

<!-- 3 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col"></div>

  <!-- Column will be 50% -->
  <div class="col"></div>

  <!-- Column will be 25% -->
  <div class="col"></div>
</div>

I am unsure how I would code this in CSS however and was hoping somebody could point me in the right direction?

Peter

4

3 回答 3

1

The easiest way is to to add another class to the row divs, designating how many divs it contains: 

<!-- 3 columns -->
<div class="row col3">
  <!-- Column will be 25% -->
  <div class="col"></div>

  <!-- Column will be 50% -->
  <div class="col"></div>

  <!-- Column will be 25% -->
  <div class="col"></div>
</div>

and add styles accordingly:

.col3 div {
   width: 33%;
}

This would give all div-elements in a div with class col3 33% width.

于 2015-01-04T22:11:47.493 回答
1

Just set up grid classes with different widths (100%, 75%, 50%, etc) depending on the size you want and add that to the div:

HTML 

<!-- 2 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col quarter"></div>

  <!-- Column will be 75% -->
  <div class="col three-quarters"></div>
</div>

<!-- 3 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col quarter"></div>

  <!-- Column will be 50% -->
  <div class="col half"></div>

  <!-- Column will be 25% -->
  <div class="col quarter"></div>
</div>

CSS

html,body{
    width: 100%;
}

.row{
    width: 100%;
    overflow: hidden;
}

.col{
    background: red;
    height: 20px;
}

.full{
    width: 100%;
    float: left;
}

.three-quarters{
    width: 75%;
    background: blue;
    float: left;
}

.half{
    width: 50%;
    background: black;
    float: left;
}

.quarter{
    width: 25%;
    float: left;
    background: yellow;
}

FIDDLE

于 2015-01-04T22:12:16.073 回答
1

In your CSS set up classes for the different sizes you want. For example col-1 will be 25%, col-2 50%, etc...

HTML: 

<div class="row">
  <!-- Column will be 100% -->
  <div class="col-4">100%</div>
</div>

<!-- 2 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col-1">25%</div>

  <!-- Column will be 75% -->
  <div class="col-3">75%</div>
</div>

<!-- 3 columns -->
<div class="row">
  <!-- Column will be 25% -->
  <div class="col-1">25%</div>

  <!-- Column will be 50% -->
  <div class="col-2">50%</div>

  <!-- Column will be 25% -->
  <div class="col-1">25%</div>
</div>

CSS:

.col-1, .col-2, .col-3, .col-4 {
    background-color:#ccc;
    float: left;
}
.row {
    clear:left;
}
.col-1 {
    width:25%;
}
.col-2 {
    width: 50%;
}
.col-3 {
    width: 75%;
}
.col-4 {
    width: 100%;
}

JsFiddle example

于 2015-01-04T22:21:25.970 回答