Question

目标是使卡片div与卡片儿童的宽度相同。所以宽度为1,2或3张牌。卡片div也必须以页面为中心。

HTML

<body>
  <div id="cards">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</body>

CSS

.card {
  width: 30px;
  height: 20px;
  background-color: green;
  margin: 10px;
  float: left;
}

#cards {
  background-color: red;
  margin: 0 auto;
  max-width: 150px;
  min-width: 50px;
}

#cards:after {
  content: " ";
  display: block;
  clear: both;
}

body {
  background-color: blue;
}

Answer 1

您是否尝试过使用Flexbox？

这样的事情：

#cards {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  max-width: 150px;
  min-width: 50px;
}

.card {
  flex: 1;
  height: 100px;
}

您可以看到示例here

Answer 2

如果我理解了您的问题，您可以使用display:table;： https://jsfiddle.net/xq69zL9e/2/

＆＃13;

.card {
  width: 30px;
  height: 20px;
  background-color: green;
  margin: 10px;
  float: left;
}
#cards {
  background-color: red;
  margin: 0 auto;
  display: table;
}
body {
  background-color: blue;
}

＆＃13;

<div id="cards">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

＆＃13;

注意：

这里不需要clearfix，也不需要宽度：）

使用display：inline-flex，inline-table或inline-block也会这样做，但父母需要text-align:center才能使容器居中。没有clearfix

Answer 3

#cards {
  background-color: red;
  margin: 0 auto;
  display:inline-block
}

宽度父级与浮动div相同

3 个答案: