在具有基于PX的边缘的容器内使用基于％的宽度div

Question

在这里初学者的问题 - 我敢肯定，它已经被问到了很多次，但不知道该问题意味着我很难找到答案。

我正在尝试在响应迅速的DIV中创建3个"卡片"。我希望卡之间的边距保持在20px。

这是我到目前为止提出的 - 卡容器的内容应加起来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>  

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

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

或者您也可以在.card类中使用display-inline-block。

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

Answer 3

添加此

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

并将解决您的问题。