Question

	.card .card-image {
		padding-top: 10px;
	}

	.card {
		width:100%;
		/*min-height:250px;*/
		background:rgba(255,255,255,1);
		border-radius:8px;
		text-align: center;
		/*display: inline-block;*/
		/*margin: 10px 0px;*/
		padding: 0px 0px 5px 0px;
		/*position: relative;*/
		float: left;
		margin-bottom: 10px !important;
		display: inline-block;
	    overflow: visible;
	}

.row .col.s6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col {
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 .75rem;
    min-height: 1px;
}

.row .col.s12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
}

 <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="col s12 active">            
<div class="contents-tabs">
	<div class="col s6 cards-container" style="padding: 0 5px !important;">
      	<div class="card">
        	<div class="card-image">
          		<img src="http://localhost/storage/uploads/1/Razer40996862167@3x_c.png">
        	</div>
        	<div class="card-content">
          		<div class="row">
          			<div class="progress">
						<div class="determinate" id="par1" style="width: 0.016722408026756%"></div>
					</div>
          		</div>
          		<div class="row">
					<div class="col s8">
						<div class="contents event-status event-status-left">
							<p>目前人数 <b><span id="left1">1</span></b></p>
						</div>
					</div>
					<div class="col s4">
						<div class="contents event-status event-status-req">
							<p><b>5980</b></p>
						</div>
					</div>
				</div>
				<div class="row">
					<sup>第1期</sup> 雷蛇 蝰蛇2000穿越火线+萨诺狼蛛专业键盘 套装
				</div>
        	</div>
      	</div>
    </div>
							    <div class="col s6 cards-container" style="padding: 0 5px !important;">
      	<div class="card">
        	<div class="card-image">
          		<img src="http://localhost/storage/uploads/2/Razer26838583992@3x_c.png">
        	</div>
        	<div class="card-content">
          		<div class="row">
          			<div class="progress">
						<div class="determinate" id="par2" style="width: 0.033557046979866%"></div>
					</div>
          		</div>
          		<div class="row">
					<div class="col s8">
						<div class="contents event-status event-status-left">
							<p>目前人数 <b><span id="left2">1</span></b></p>
						</div>
					</div>
					<div class="col s4">
						<div class="contents event-status event-status-req">
							<p><b>2980</b></p>
						</div>
					</div>
				</div>
				<div class="row">
					<sup>第1期</sup> 雷蛇 炼狱蝰蛇游戏鼠标 6400dpi 标准版黑色（旗舰）
				</div>
        	</div>
      	</div>
    </div>
							    <div class="col s6 cards-container" style="padding: 0 5px !important;">
      	<div class="card">
        	<div class="card-image">
          		<img src="http://localhost/storage/uploads/3/Razer6095225@3x_c.png">
        	</div>
        	<div class="card-content">
          		<div class="row">
          			<div class="progress">
						<div class="determinate" id="par3" style="width: 0%"></div>
					</div>
          		</div>
          		<div class="row">
					<div class="col s8">
						<div class="contents event-status event-status-left">
							<p>目前人数 <b><span id="left3">0</span></b></p>
						</div>
					</div>
					<div class="col s4">
						<div class="contents event-status event-status-req">
							<p><b>8580</b></p>
						</div>
					</div>
				</div>
				<div class="row">
					<sup>第1期</sup> 雷蛇 锐蝮蛇Lancehead TE竞技版-粉晶鼠标 韦神同款
				</div>
        	</div>
      	</div>
    </div>
							    <div class="col s6 cards-container" style="padding: 0 5px !important;">
      	<div class="card">
        	<div class="card-image">
          		<img src="http://localhost/storage/uploads/4/Razer1772859@3x_c.png">
        	</div>
        	<div class="card-content">
          		<div class="row">
          			<div class="progress">
						<div class="determinate" id="par4" style="width: 0.02092050209205%"></div>
					</div>
          		</div>
          		<div class="row">
					<div class="col s8">
						<div class="contents event-status event-status-left">
							<p>目前人数 <b><span id="left4">1</span></b></p>
						</div>
					</div>
					<div class="col s4">
						<div class="contents event-status event-status-req">
							<p><b>4780</b></p>
						</div>
					</div>
				</div>
				<div class="row">
					<sup>第1期</sup> 雷蛇 萨诺狼蛛专业版Cynosa Pro 游戏键盘 3色背光键盘
				</div>
        	</div>
      	</div>
    </div>
							    <div class="col s6 cards-container" style="padding: 0 5px !important;">
      	<div class="card">
        	<div class="card-image">
          		<img src="http://localhost/storage/uploads/5/Xiaomi100003077048@3x_c.png">
        	</div>
        	<div class="card-content">
          		<div class="row">
          			<div class="progress">
						<div class="determinate" id="par5" style="width: 0%"></div>
					</div>
          		</div>
          		<div class="row">
					<div class="col s8">
						<div class="contents event-status event-status-left">
							<p>目前人数 <b><span id="left5">0</span></b></p>
						</div>
					</div>
					<div class="col s4">
						<div class="contents event-status event-status-req">
							<p><b>3380</b></p>
						</div>
					</div>
				</div>
				<div class="row">
					<sup>第1期</sup> 小米盒子4SE 高清网络机顶盒
				</div>
        	</div>
      	</div>
    </div>											    
</div></div>

如何清除Materialize.css中的卡片间隙？以下CSS似乎根本不起作用。

.cards-container {
  column-break-inside: avoid;
}

.card .card-image {
    padding-top: 10px;
}

.card {
    width:100%;
    /*min-height:250px;*/
    background:rgba(255,255,255,1);
    border-radius:8px;
    text-align: center;
    /*display: inline-block;*/
    /*margin: 10px 0px;*/
    padding: 0px 0px 5px 0px;
    /*position: relative;*/
    float: left;
    margin-bottom: 10px !important;
    display: inline-block;
    overflow: visible;
}

Materialize.css中的卡间距

0 个答案: