空间两个div，阻止他们互相加入

时间：2018-06-03 19:26:34

标签： javascript html css

我想创建一个带网格的网站。因为我下载了一个模板并开始编辑它。那里只有6个网格框。我又增加了3个。但是我添加的网格正在用前3个网格进行控制。我有以下用于创建网格的HTML代码：

＆＃13;
＆＃13; 
.heading h3 {
    font-size: 45px;
	text-align:center;
    text-transform: uppercase;
    color: #000;
}
.heading p {
    text-align: center;
    color: #000;
    line-height: 26px;
    width: 60%;
    margin: 0 auto;
    margin-bottom: 50px;
}
.grid1 {
    text-align: center;
    background: #e0e0e0;
    background: #ffc107;
	background:#fff;
    padding: 25px 40px;
    -webkit-box-shadow: 0 0 40px #aaa;
    -moz-box-shadow: 0 0 40px #aaa;
    box-shadow: 0 0 40px #aaa;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
	-webkit-box-shadow:0px 1px 8px 0px rgba(158, 158, 158, 0.75);
	-moz-box-shadow:0px 1px 8px 0px rgba(158, 158, 158, 0.75);
	box-shadow:0px 1px 8px 0px rgba(158, 158, 158, 0.75);
}
.grid1:hover {
    background: #12ccc3;
}
.grid1 h4 {
    font-size: 20px;
    text-transform: uppercase;
    margin: 25px 0 20px;
    color: #ff9900;
    font-weight: 600;
}
.grid1 p {
    font-size: 14px;
    letter-spacing: .5px;
    color: #6b6b6b;
}
.services {
    padding: 5em 0;
}
.services .heading h3 ,.services .heading p{
    color: #fff;
}
.services-top-grids {
    margin-bottom: 30px;
}
.grid1 i.fa {
    font-size: 40px;
    color: #146eb4;
}
＆＃13; 
<div class="services">
  <div class="container">
  		<h3 class="heading-agileinfo" style="color:#e50000"><span>grid</span></h3>

  		<div class="services-top-grids">
  			<div class="col-md-4">
  				<div class="grid1">
  					<i class="fa fa-graduation-cap" aria-hidden="true"></i>
  					<h4 style="color:#e50000">Expert Proffessionals</h4>
  					<p>Our members have years of experience in Nurse entrance exam. </p>
  				</div>
  			</div>
				<div class="col-md-4">
  				<div class="grid1">
  					<i class="fa fa-graduation-cap" aria-hidden="true"></i>
  					<h4 style="color:#e50000">Expert Proffessionals</h4>
  					<p>Our members have years of experience in Nurse entrance exam. </p>
  				</div>
  			</div>
				<div class="col-md-4">
  				<div class="grid1">
  					<i class="fa fa-graduation-cap" aria-hidden="true"></i>
  					<h4 style="color:#e50000">Expert Proffessionals</h4>
  					<p>Our members have years of experience in Nurse entrance exam. </p>
  				</div>
  			</div>
				<div class="col-md-4">
					<div class="grid1">
						<i class="fa fa-graduation-cap" aria-hidden="true"></i>
						<h4 style="color:#e50000">Expert Proffessionals</h4>
						<p>Our members have years of experience in Nurse entrance exam. </p>
					</div>
				</div>
  			<div class="col-md-4">
  				<div class="grid1">
  					<i class="fa fa-phone" aria-hidden="true"></i>
  					<h4 style="color:#e50000">Great Support</h4>
  					<p>We provide 24 hours online and offline support for our students. </p>
  				</div>
  			</div>
  			<div class="col-md-4">
  				<div class="grid1">
  					<i class="fa fa-thumbs-up" aria-hidden="true"></i>
  					<h4 style="color:#e50000">Proffessional Service</h4>
  					<p>Our expert proffessionals provide you with complete proffessional service.</p>
  				</div>
  			</div>
  			<div class="clearfix"></div>
  		</div>
  		<div class="services-bottom-grids">
  			<div class="col-md-4">
  				<div class="grid1">
  					<i class="fa fa-star" aria-hidden="true"></i>
  					<h4 style="color:#e50000">Highly Recomended</h4>
  					<p>Our exams are recomended and appreciated by experts all over the world. </p>
  				</div>
  			</div>
  			<div class="col-md-4">
  				<div class="grid1">
  					<i class="fa fa-user-plus" aria-hidden="true"></i>
  					<h4 style="color:#e50000">Positive Reviews</h4>
  					<p>Students who took our exams are completely satisfied with our service. </p>
  				</div>
  			</div>
  			<div class="col-md-4">
  				<div class="grid1">
  					<i class="fa fa-user-md" aria-hidden="true"></i>
  					<h4 style="color:#e50000">Job Vacancy</h4>
  					<p>We also list the vacancy available in selected places. </p>
  				</div>
  			</div>


  			  		</div>
＆＃13;
＆＃13;
＆＃13;

当我运行此代码时，我得到的结果如下图所示

enter image description here 底部和顶部网格都很好，但中间的网格与第一个网格连接。我怎么能阻止它。我怎么能在他们之间留出空间

2 个答案:

答案 0 :(得分：0)

因为，单行只有12个空间来放置网格， 您的模板将所有12个网格划分为3行，

<div  class="row">
4     4      4
</div>

只需将新的三个div放在带有“services-bottom-grid”类的新div中。

.services-top-grids { margin-bottom: 30px; }

此类将空格设置为底部30 px

答案 1 :(得分：0)

最简单的解决方案是为您使用的每12列添加row类（Documentation）：

<div class="services">
  <div class="container">
        <h3 class="heading-agileinfo" style="color:#e50000"><span>grid</span></h3>

        <div class="services-top-grids row">
            <div class="col-md-4">
                <div class="grid1">
                    <!-- omitted -->
                </div>
            </div>
                <div class="col-md-4">
                <div class="grid1">
                      <!-- omitted -->
                </div>
            </div>
                <div class="col-md-4">
                <div class="grid1">
                       <!-- omitted -->
                </div>
            </div>
        </div>
        <div class="services-top-grids row">
                <div class="col-md-4">
                    <div class="grid1">
                         <!-- omitted -->
                    </div>
                </div>
            <div class="col-md-4">
                <div class="grid1">
                    <!-- omitted -->
                </div>
            </div>
            <div class="col-md-4">
                <div class="grid1">
                    <!-- omitted -->
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="services-bottom-grids row">
            <div class="col-md-4">
                <div class="grid1">
                    <!-- omitted -->
                </div>
            </div>
            <div class="col-md-4">
                <div class="grid1">
                    <!-- omitted -->
                </div>
            </div>
            <div class="col-md-4">
                <div class="grid1">
                    <!-- omitted -->
                </div>
            </div>


</div>

JSFiddle：https://jsfiddle.net/e3Les12m/

相关问题
最新问题