Question

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

我试图制作3＆＃34;卡片＆＃34;在一个响应的div。我希望卡片之间的余量保持在20px。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

您可以function loadMesh(objTxt, mtlTxt) { var onProgress = function ( xhr ) { if ( xhr.lengthComputable ) { } }; var onError = function ( xhr ) { }; var mtlLoader = new THREE.MTLLoader(); mtlLoader.setTexturePath('assets/'); mtlLoader.setPath( 'assets/' ); mtlLoader.load( mtlTxt, function( materials ) { materials.preload(); if(materials.materials['initialShadingGroup']['map'] != null) { materials.materials['initialShadingGroup']['map']['magFilter'] = THREE.NearestFilter; materials.materials['initialShadingGroup']['map']['minFilter'] = THREE.LinearFilter; } /*set environment map*/ materials.materials['initialShadingGroup']['envMap'] = new THREE.CubeTextureLoader().load( [ 'img/posx.jpg', 'img/negx.jpg', 'img/posy.jpg', 'img/negy.jpg', 'img/posz.jpg', 'img/negz.jpg' ] ); /*set reflectivity of material*/ materials.materials['initialShadingGroup']['reflectivity'] = 1.0; /*set anisotropy of bumpMap*/ if(materials.materials['initialShadingGroup']['bumpMap'] != null) { materials.materials['initialShadingGroup']['bumpMap']['anisotropy'] = 16; } if(materials.materials['initialShadingGroup']['specularMap'] != null) { materials.materials['initialShadingGroup']['specularMap']['anisotropy'] = 16; } materials.materials['initialShadingGroup']['bumpScale'] = 0.1; var objLoader = new THREE.OBJLoader(); objLoader.setMaterials( materials ); objLoader.setPath( 'assets/' ); objLoader.load( objTxt, function ( object ) { /*set attributes of OBJ childs*/ object.traverse( function( node ) { if ( node instanceof THREE.Mesh ) { node.castShadow = true; node.receiveShadow = true; node.material.shading = THREE.SmoothShading; } } ); scene.add( object ); }, onProgress, onError ); }); }使用https://jsfiddle.net/3gg8ngm2/2/：

flex

.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>使用display-inline-block课程。

Answer 2

基于display: flex

的解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

添加此

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

并将解决您的问题。

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

3 个答案: