在具有基于 px 的边距的容器内使用基于 % 的宽度 div答案

【问题标题】：Using %-based width divs inside a container with px-based margin在具有基于 px 的边距的容器内使用基于 % 的宽度 div
【发布时间】：2017-09-08 21:56:05
【问题描述】：

这里有一个初学者的问题 - 我确信它被问了很多次，但不知道如何表达这个问题意味着我发现很难找到答案。

我正在尝试在响应式 div 中创建 3 个“卡片”。我希望卡片之间的边距保持在 20 像素。

This is what I've come up with so far - 卡片容器的内容加起来应该是 965，所以我不确定是什么导致它破裂和溢出，除非我做错了什么。

.container {
    max-width: 1280px;
}

.card-container {
    max-width: 965px;
    padding: 0 20px;
    display: block; 
    float: left;
}

.card {
    width: 33%;
    min-width: 295px;
}

.one {
    width: 100%;
    height: 200px;
    background-color: #333;
    display: block;
    float: left;
}

.card + .card {
    margin: 0px 0px 0px 20px;
}

<div class="container">
    <div class="card-container">
        <div class="card">
            <div class="one"></div>
        </div>
        <div class="card">
            <div class="one"></div>
        </div>
        <div class="card">
            <div class="one"></div>
        </div>
    </div>
    <!-- <div class="map-card"></div> -->
</div>

感谢任何帮助，或重定向到类似的主题。

【问题讨论】：

标签： html css responsive

【解决方案1】：

你可以像这样使用flex https://jsfiddle.net/3gg8ngm2/2/:

.container {
	max-width: 1280px;
}

.card-container {
	max-width: 965px;
	padding: 0 20px;
	display: flex; 	
}

.card {
	width: 33%;
	/* min-width: 295px; */
}

.one {
	width: 100%;
	height: 200px;
	background-color: #333;
	display: block;
	float: left;
}

.card + .card {
	margin: 0px 0px 0px 20px;
}

<div class="container">
		<div class="card-container">
			<div class="card">
				<div class="one"></div>
			</div>
			<div class="card">
				<div class="one"></div>
			</div>
			<div class="card">
				<div class="one"></div>
			</div>
		</div>
		<!-- <div class="map-card"></div> -->
	</div>

或者您也可以将display-inline-block 用于您的.card 课程。

【讨论】：

【解决方案2】：

有一个基于display: flex的解决方案

.container {
  width: 600px;
}

.card-container {
    display: flex;
    background: yellow;
}

.card {
    width: calc(33% - 20px);
    margin-right: 20px;
}
.card:first-child {margin-left:20px}

.one {
  height: 200px;
  background-color: #333;
}

<div class="container">
  <div class="card-container">
    <div class="card">
      <div class="one">1</div>
    </div>
    <div class="card">
      <div class="one">2</div>
    </div>
    <div class="card">
      <div class="one">3</div>
      </div>
   </div>
</div>

【讨论】：

【解决方案3】：

添加这个

.card {
    width: 30%;
    float:left;
    min-width: 295px;
}

并将解决您的问题。

【讨论】：