![tiles]( "tiles")
本文介绍了删除空白引导程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试删除瓷砖之间的空白区域，如下图所示:
这是我目前拥有的:
这是我目前所拥有的第二张图片的标记:
CSS
.mainbody-section {填充顶部:30px；填充底部:30px；}/* 覆盖文本 */.模块 {背景颜色:浅灰色；背景附件:固定；/*宽度:400像素；*/高度:300px；位置:相对；溢出:隐藏；边距:20px；}.module >标题{位置:绝对；底部:0；左:0；宽度:100%；填充:20px 10px；背景:继承；背景附件:固定；溢出:隐藏；}.module >标题::之前{内容: "";位置:绝对；顶部:-20px；左:0；宽度:200%；高度:200%；背景:继承；背景附件:固定；-webkit-过滤器:模糊(4px)；过滤器:模糊(4px)；}.module >标题::之后{内容: "";位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；背景:rgba(0, 0, 0, 0.25);}.module >标题 >h1{边距:0；白颜色;位置:相对；z-索引:1；}.module >标题 >h2{边距:0；白颜色;位置:相对；z-索引:1；}* {box-sizing: 边框框；}
HTML
<div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;"><div class="row"><div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right"><div class="module"><h1 style="font-size: 20px; text-align: center;">Test<h2 style="font-size: 13px; text-align: center;">这是一些子文本</标题>
<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right"><div class="module"><h1 style="font-size: 20px; text-align: center;">Test<h2 style="font-size: 13px; text-align: center;">这是一些子文本</标题>
<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right"><div class="module"><h1 style="font-size: 20px; text-align: center;">Test<h2 style="font-size: 13px; text-align: center;">这是一些子文本</标题>
有人可以建议我删除瓷砖之间的所有空白吗?
谢谢
解决方案
.mainbody-section {填充顶部:30px；填充底部:30px；}.newClass{背景颜色:浅灰色；填充:0px！重要；边距:0px！重要；}.红色的{背景颜色:红色！重要；}/* 覆盖文本 */.模块 {背景色:#abc;背景附件:固定；/*宽度:400像素；*/高度:300px；位置:相对；溢出:隐藏；}.module >标题{位置:绝对；底部:0；左:0；宽度:100%；填充:20px 10px；背景:继承；背景附件:固定；溢出:隐藏；}.module >标题::之前{内容: "";位置:绝对；顶部:-20px；左:0；宽度:200%；高度:200%；背景:继承；背景附件:固定；-webkit-过滤器:模糊(4px)；过滤器:模糊(4px)；}.module >标题::之后{内容: "";位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；背景:rgba(0, 0, 0, 0.25);}.module >标题 >h1{边距:0；白颜色;位置:相对；z-索引:1；}.module >标题 >h2{边距:0；白颜色;位置:相对；z-索引:1；}* {box-sizing: 边框框；}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="样式表"/><div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;"><div class="row"><div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass"><div class="module"><h1 style="font-size: 20px; text-align: center;">Test<h2 style="font-size: 13px; text-align: center;">这是一些子文本</标题>
<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass"><div class="module red"><h1 style="font-size: 20px; text-align: center;">Test<h2 style="font-size: 13px; text-align: center;">这是一些子文本</标题>
<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass"><div class="module"><h1 style="font-size: 20px; text-align: center;">Test<h2 style="font-size: 13px; text-align: center;">这是一些子文本</标题>
http://jsfiddle.net/qbo8pk8j/3/
I am trying to remove the white space that is between my tiles like the picture below:
This is what I currently have :
Here is the mark up for the second picture which is currently what I have in place :
CSS
.mainbody-section {
padding-top: 30px;
padding-bottom: 30px;
}
/* Overlay text */
.module {
background-color: lightgray;
background-attachment: fixed;
/*width: 400px;*/
height: 300px;
position: relative;
overflow: hidden;
margin: 20px;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
}
.module > header > h1 {
margin: 0;
color: white;
position: relative;
z-index: 1;
}
.module > header > h2 {
margin: 0;
color: white;
position: relative;
z-index: 1;
}
* {
box-sizing: border-box;
}
HTML
<div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
<div class="module">
<header>
<h1 style="font-size: 20px; text-align: center;">Test
</h1>
<h2 style="font-size: 13px; text-align: center;"> This is some sub-text
</h2>
</header>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
<div class="module">
<header>
<h1 style="font-size: 20px; text-align: center;">Test
</h1>
<h2 style="font-size: 13px; text-align: center;"> This is some sub-text
</h2>
</header>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
<div class="module">
<header>
<h1 style="font-size: 20px; text-align: center;">Test
</h1>
<h2 style="font-size: 13px; text-align: center;"> This is some sub-text
</h2>
</header>
</div>
</div>
</div>
Can someone please advice me on a way to remove all the white space between the tiles?
Thanks
解决方案
.mainbody-section {
padding-top: 30px;
padding-bottom: 30px;
}
.newClass{
background-color: lightgray;
padding: 0px!important;
margin:0px!important;
}
.red{
background-color: red!important;
}
/* Overlay text */
.module {
background-color: #abc;
background-attachment: fixed;
/*width: 400px;*/
height: 300px;
position: relative;
overflow: hidden;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
}
.module > header > h1 {
margin: 0;
color: white;
position: relative;
z-index: 1;
}
.module > header > h2 {
margin: 0;
color: white;
position: relative;
z-index: 1;
}
* {
box-sizing: border-box;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass">
<div class="module">
<header>
<h1 style="font-size: 20px; text-align: center;">Test
</h1>
<h2 style="font-size: 13px; text-align: center;"> This is some sub-text
</h2>
</header>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass">
<div class="module red">
<header>
<h1 style="font-size: 20px; text-align: center;">Test
</h1>
<h2 style="font-size: 13px; text-align: center;"> This is some sub-text
</h2>
</header>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass">
<div class="module">
<header>
<h1 style="font-size: 20px; text-align: center;">Test
</h1>
<h2 style="font-size: 13px; text-align: center;"> This is some sub-text
</h2>
</header>
</div>
</div>
</div>
http://jsfiddle.net/qbo8pk8j/3/
这篇关于删除空白引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-30 23:11