防止两个引导容器彼此重叠。？

时间：2018-09-16 21:07:29

标签： html css twitter-bootstrap-3

已更新相对位置。 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<style>

@media (max-width: 768px) {
.first {
	position: static;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 0px;
	left: 0px;
}
.second {
	position: static;
	width: 600px;
	height: 400px;
	right: 0px;
}
}

@media (min-width: 576px) {
.first {
	position: static;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 0px;
	left: 0px;
}
.second {
	position: static;
	width: 600px;
	height: 400px;
	right: 0px;
}
}

@media (min-width: 768px) {
.first {
	position: static;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 0px;
	left: 0px;
}
.second {
	position: static;
	width: 499px;
	height: 100px;
	right: 0px;
}
}

@media (min-width: 992px) {
.first {
	position: absolute;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 142px;
	left: 106px;
}
.second {
	position: absolute;
	width: 600px;
	height: 400px;
	right: 45px;
}
}

@media (min-width: 1200px) {
.first {
	position: relative;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 142px;
	left: 106px;
	clear: both;
}
.second {
	position: relative;
	width: 600px;
	height: 400px;
	right: -422px;
clear: both;
top: -294px;
}
}
.zero-padding {
	padding: 0px !important;
}

@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}


.element {
  @include clearfix;
}
</style>

<!-- Our story Section Start -->
	
	<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center heading">
      <h1>OUR STORY</h1>
      <div class="smaller-border text-center"></div>
    </div>
		</div>
	</div>
<div class="container" style="position: relative;">
  <div class="row">
    <div class="col-sm-4 first ">
      <p style="margin-bottom: 40px;">Sajaya Young Ladies was established under the name of Children Centers in 2004, and declared its independence in 2012, to focus on young ladies based on the vision of Her Highness Sheikha Jawaher bint Mohammad Al Qassimi.</p>
      <a class="gradient-btn gradient-color" style="padding: 10px;">More Details</a> </div>
    <div class="col-sm-8 second"> <img src="https://preview.ibb.co/gdt5cK/Image_1.jpg" class="img img-responsive" alt="image" > </div>
  </div>
</div>
<!-- end -->
	
	<div class="clearfix"></div>
	
	<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center heading">
      <h1>Upcoming Activities</h1>
      <div class="smaller-border text-center"></div>
    </div>
  </div>
	</div>
	
		<!-- Our story Section Start -->
<div class="container" style="position: relative;">
  <div class="row">
    <div class="col-sm-4 first zero-padding">
      <p style="margin-bottom: 40px;">Sajaya Young Ladies was established under the name of Children Centers in 2004, and declared its independence in 2012, to focus on young ladies based on the vision of Her Highness Sheikha Jawaher bint Mohammad Al Qassimi.</p>
      <a class="gradient-btn gradient-color" style="padding: 10px;">More Details</a> </div>
    <div class="col-sm-8 second"> <img src="https://preview.ibb.co/gdt5cK/Image_1.jpg" class="img img-responsive" alt="image" > </div>
  </div>
</div>
<!-- end -->

即使两个容器都分开了，我还是会重叠，但我不知道是什么使它们在lg和xl屏幕上看起来像这样。这是我的代码段，让我知道是什么导致它们像这样相互重叠。我认为仓位出了什么问题，但是如果我更改任何元素的仓位，一切都会搞砸了。

这是我要实现的目标。 enter image description here 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<style>

.smaller-border {
	border-bottom: 3px solid red;
	width: 100px;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 80px;
}
.gradient-color {
	background: linear-gradient(to left, #280489 20%, #e24301 100%);
	background-clip: text;
	text-fill-color: transparent;
	color: transparent;
	font-family: "HelveticaNeue";
	font-weight: bold;
}
.left-btn {
	float: left;
}

@media (max-width: 768px) {
.first {
	position: static;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 0px;
	left: 0px;
}
.second {
	position: static;
	width: 600px;
	height: 400px;
	right: 0px;
}
}

@media (min-width: 576px) {
.first {
	position: static;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 0px;
	left: 0px;
}
.second {
	position: static;
	width: 600px;
	height: 400px;
	right: 0px;
}
}

@media (min-width: 768px) {
.first {
	position: static;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 0px;
	left: 0px;
}
.second {
	position: static;
	width: 499px;
	height: 100px;
	right: 0px;
}
}

@media (min-width: 992px) {
.first {
	position: absolute;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 142px;
	left: 106px;
}
.second {
	position: absolute;
	width: 600px;
	height: 400px;
	right: 45px;
}
}

@media (min-width: 1200px) {
.first {
	position: absolute;
	background-color: white;
	z-index: 4;
	border: 3px solid red;
	border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
	border-image-slice: 1;
	height: auto;
	padding: 52px 60px 64px 49px;
	top: 142px;
	left: 106px;
	clear: both;
}
.second {
	position: absolute;
	width: 600px;
	height: 400px;
	right: 163px;
	clear: both;
}
}
.zero-padding {
	padding: 0px !important;
}

@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}


.element {
  @include clearfix;
}

</style>

	<!-- Our story Section Start -->
<div class="container" style="position: relative;">
  <div class="row">
    <div class="col-sm-12 text-center heading">
      <h1>OUR STORY</h1>
      <div class="smaller-border text-center"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4 first ">
      <p style="margin-bottom: 40px;">Sajaya Young Ladies was established under the name of Children Centers in 2004, and declared its independence in 2012, to focus on young ladies based on the vision of Her Highness Sheikha Jawaher bint Mohammad Al Qassimi.</p>
      <a class="gradient-btn gradient-color" style="padding: 10px;">More Details</a> </div>
    <div class="col-sm-8 second"> <img src="https://preview.ibb.co/gdt5cK/Image_1.jpg" class="img img-responsive" alt="image" > </div>
  </div>
</div>
<!-- end -->
	
	<div class="clearfix"></div>
	
		<!-- Our story Section Start -->
<div class="container" style="position: relative;">
  <div class="row">
    <div class="col-sm-12 text-center heading">
      <h1>Upcoming Activities</h1>
      <div class="smaller-border text-center"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4 first zero-padding">
      <p style="margin-bottom: 40px;">Sajaya Young Ladies was established under the name of Children Centers in 2004, and declared its independence in 2012, to focus on young ladies based on the vision of Her Highness Sheikha Jawaher bint Mohammad Al Qassimi.</p>
      <a class="gradient-btn gradient-color" style="padding: 10px;">More Details</a> </div>
    <div class="col-sm-8 second"> <img src="https://preview.ibb.co/gdt5cK/Image_1.jpg" class="img img-responsive" alt="image" > </div>
  </div>
</div>
<!-- end -->

1 个答案:

答案 0 :(得分：1)

您可以使用一些负边距来实现此目的，而无需绝对位置。

这是基于您的代码的简化示例（我删除了其他视觉样式以保留最重要的代码）

.smaller-border {
  border-bottom: 3px solid red;
  width: 100px;
  border-image: linear-gradient(to left, #280489 0%, #e24301 100%);
  border-image-slice: 1;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
}

.left-btn {
  float: left;
}

.first p {
  margin-bottom: 40px;
  padding: 40px;
  margin-right: -100px;
  border: 2px solid;
  position: relative;
  z-index: 22;
  background: #fff;
}

.second img {
  margin-top: 50px;
}

.zero-padding {
  padding: 0px !important;
}

@media all and (max-width:767px) {
  .first p {
    margin-right: 0;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!-- Our story Section Start -->
<div class="container" style="position: relative;">
  <div class="row">
    <div class="col-sm-12 text-center heading">
      <h1>OUR STORY</h1>
      <div class="smaller-border text-center"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4 first ">
      <p style="margin-bottom: 40px;">Sajaya Young Ladies was established under the name of Children Centers in 2004, and declared its independence in 2012, to focus on young ladies based on the vision of Her Highness Sheikha Jawaher bint Mohammad Al Qassimi.</p>
      <a class="gradient-btn gradient-color" style="padding: 10px;">More Details</a> </div>
    <div class="col-sm-8 second"> <img src="https://preview.ibb.co/gdt5cK/Image_1.jpg" class="img img-responsive" alt="image"> </div>
  </div>
</div>
<!-- end -->

<div class="clearfix"></div>

<!-- Our story Section Start -->
<div class="container" style="position: relative;">
  <div class="row">
    <div class="col-sm-12 text-center heading">
      <h1>Upcoming Activities</h1>
      <div class="smaller-border text-center"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4 first zero-padding">
      <p style="margin-bottom: 40px;">Sajaya Young Ladies was established under the name of Children Centers in 2004, and declared its independence in 2012, to focus on young ladies based on the vision of Her Highness Sheikha Jawaher bint Mohammad Al Qassimi.</p>
      <a class="gradient-btn gradient-color" style="padding: 10px;">More Details</a> </div>
    <div class="col-sm-8 second"> <img src="https://preview.ibb.co/gdt5cK/Image_1.jpg" class="img img-responsive" alt="image"> </div>
  </div>
</div>
<!-- end -->

相关问题
最新问题