Line divs using css and HTML

Question

I am trying to build 4 divsinline using CSS and also make them responsive.

I tried this css

.col {
  border:1px solid black;
  width:20%;
  display:inline-block;
  padding:5px;
  margin:5px 5px 5px 5px;
  text-align:left;
}


@media only screen and (max-width: 800px) {
  .col {
    width:40%;
  }
}

@media only screen and (max-width: 500px) {
  .col {
    width:100%;
  }
}

But as the screen gets smaller, they have slightly different sizes.

I created a script for my code: https://jsfiddle.net/j2de3tt8/

I am trying to do it like: http://www.elegantthemes.com/preview/Divi/shop-no-sidebar/

Answer 1

I made a modification of the Abhitalks violin. I deleted the registration: 0; and margin: 0; from everything, since I do not see this as necessary. If you set your container div to 100% width, all your other units and units must also be%.

2% .col, , "" div.

.col {
   border: 1px solid black;
   width: 23%; display: inline-block;
   padding: 2%; margin: 1%;
   text-align: left; 
   font-size: 16px;
}

https://jsfiddle.net/Zemo/482smdfq/

-, .col .

Answer 2

, , .

.

• , div. , . , box-sizing , .

CSS...

* { box-sizing: border-box; padding: 0; margin: 0; }

... box-sizing /reset CSS . , margin . , margin , div s.

:

.cont { width: 100%; } /* total width of parent */
.col {
  margin: 1%; /* margin of 1% means a total of 2% left-and-right margins */
}
@media only screen and (max-width: 500px) {
  .col { width: 98%; } /* reduce 2% from the total width */
}

2. div display: inline-block. , inline-block . , HTML div, , . .

, , , . font-size 0, :

.cont { font-size: 0px; }

reset font-size div :

.col { font-size: 16px; }

, :

Fiddle: https://jsfiddle.net/abhitalks/v69gadou/

:

* { box-sizing: border-box; padding: 0; margin: 0; }
.cont {
  width: 100%; border: 1px solid black; 
  text-align: center; font-size: 0px; 
}
.col {
  border: 1px solid black;
  width: 20%; display: inline-block;
  padding: 5px; margin: 1%;
  text-align: left; 
  font-size: 16px; 
}

@media only screen and (max-width: 800px) {
  .col {
    width: 40%;
  }
}

@media only screen and (max-width: 500px) {
  .col {
    width: 98%;
  }
}

<div class="cont">
	<div class="col">col</div>
	<div class="col">col</div>
	<div class="col">col</div>
	<div class="col">col</div>
	<div class="col">col</div>
	<div class="col">col</div>
	<div class="col">col</div>
	<div class="col">col</div>
</div>

Hide result

Answer 3

You can try this.

@media only screen and (max-width: 500px) {
  .col {
    width:80%;
  }
}

Hope this solves the problem.

Answer 4

why not try columns ?

here's how:

.cont {

  width: 100%;

  margin: 0 auto 0 auto;

  border: 1px solid black;

  text-align: center;

  -webkit-column-count: 4;

  /* Chrome, Safari, Opera */

  -moz-column-count: 4;

  /* Firefox */

  column-count: 4;

}

.col {

  border: 1px solid black;

}

@media only screen and (max-width: 800px) {

  .cont {

    -webkit-column-count: 2;

    /* Chrome, Safari, Opera */

    -moz-column-count: 2;

    /* Firefox */

    column-count: 2;

  }

}

@media only screen and (max-width: 500px) {

  .cont {

    -webkit-column-count: 1;

    /* Chrome, Safari, Opera */

    -moz-column-count: 1;

    /* Firefox */

    column-count: 1;

  }

}

<div class="cont">

  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>

  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>

</div>

Run codeHide result