Question

如何将4个div相邻放置哪个宽度将自动计算（因为显示器的每个分辨率都不同）。

所以每当我有16个div时，显示的div数量仍然是4。

我想为每个div给出一个百分比。但这似乎不起作用（这很明显，因为每个显示器的屏幕分辨率都不同）

Answer 1

只需使用百分比值（25％）添加宽度，这将在每一行上将4个框彼此相邻。

.box {
    float: left;
    width: 25%;
}

Answer 2

我建议你使用像bootstrap这样的框架。

但这是你需要连续显示4个div的基本要求...... 只是忽略background和div:nth-child(even) - 我补充说，这样你就可以清楚地看到div区域了。

＆＃13;

section {
  max-width: 960px;
  margin: auto;
}
div {
  width: 25%;
  float: left;
  background: cornsilk;
}
div:nth-child(even) {
  background: lightgreen;
}

＆＃13;

<section>
<div>number 1</div>
<div>number 2</div>
<div>number 3</div>
<div>number 4</div>
<div>number 5</div>
<div>number 6</div>
<div>number 7</div>
<div>number 8</div>
<div>number 9</div>
<div>number 10</div>
<div>number 11</div>
<div>number 12</div>
<div>number 13</div>
<div>number 14</div>
<div>number 15</div>
<div>number 16</div>
</section>

＆＃13;

Answer 3

您可以更好地使用Bootstrap框架。例如，

<!DOCTYPE html>
<html lang="en">
<head>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="searcharea col-md-12">
        <div class="col-md-12">
        <div class="col-md-3">1</div>
        <div class="col-md-3">2</div>
        <div class="col-md-3">3</div>
        <div class="col-md-3">4</div>
    </div>
</body>
</html>

我如何在CSS中执行此操作？

3 个答案: