Question

我正在尝试使用CSS排列4 divs内联，并使其响应。

我试过这个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%;
  }
}

但随着屏幕越来越小，它们的尺寸略有不同

我创建了一个代码的小提琴：https://jsfiddle.net/j2de3tt8/

我想把它变成：http://www.elegantthemes.com/preview/Divi/shop-no-sidebar/

Answer 1

但随着屏幕越来越小，它们的尺寸略有不同

两件事。

仔细计算div s占用的总宽度。特别是有利润和所有。为安全起见，最好定义box-sizing，以便了解并控制宽度。

将此添加到您的CSS ...

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

...将有助于保持标准box-sizing，并为您提供非常简单和简单的标准化/重置CSS。有了这个，现在您知道在计算宽度时不会包含margin s。因此，您需要从容器的总宽度中减去margin s，以达到您孩子div的最佳尺寸。

例如：

.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 */
}

您的孩子div已设为display: inline-block。现在，你需要小心，因为inline-block也考虑了空格。因此，在您的情况下，HTML中的中断会导致div之间的额外间距，并且您觉得尺寸变得不同。当您更改屏幕尺寸时，这会更加明显。

有几种方法可以摆脱它，但特别是在你的情况下，零字体大小的技巧将起作用。将font-size保留在您的父级0上以折叠空格：

.cont { font-size: 0px; }

然后，重新重置您孩子font-size上的div：

.col { font-size: 16px; }

将两者结合在一起得到：

小提琴：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>

Answer 2

我对Abhitalks＆＃39;进行了修改。小提琴。我删除了填充：0;和保证金：0;来自一切，因为我不认为这是必要的。如果您将容器div设置为100％宽度，则所有其他维度和边距单位也必须为％。

关键是从你的.col的宽度减去2％，以留出将触及的余量。容器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 3

你可以试试这个。

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

希望这能解决问题。

Answer 4

为什么不试试columns？

这是如何：

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

使用css和HTML排列div

4 个答案: