Question

我想要达到的目标如下所示

我得到的是图像和绿色边框之间存在太大差距的东西。

如何使其看起来像上图。

以下是我的codepen的链接 - codepen link

以下是代码：

    .container {
  text-align: center;
  width: 80%;
}

.first {
  background: rgb(0, 30, 58);
  color: white;
}

.span1,
.span2 {
  font-size: 36px;
  font-weight: bold;
}

.span1 {
  color: rgb(72, 174, 137);
}

[type="text"] {
  border-radius: 25px;
  padding-left: 5px;
}

[type="submit"] {
  color: white;
  background-color: rgb(72, 174, 137);
  border-radius: 25px;
  position: relative;
  margin-left: -25px;
}

.use {
  height: 85%;
  margin: 0 auto;
}

.box {
  border: 3px solid rgb(72, 174, 137);
  width: 55%;
  margin: 0 auto;
  max-height: 210px;
}

.box .img-responsive {
  margin-top: -20px;
}

.para {
  text-align: left;
  margin-right: 0;
  padding-right: 0;
  padding-top: 15px;
}

.para strong {
  font-weight: 900;
  font-size: 16px;
}

.second {
  margin-bottom: 30px;
  border: 1px solid green;
  width: 10%;
}

.threebox {
  width: 90%;
  margin: 0 auto;
  padding-left: 70px;
}

.col-lg-4 {
  height: 40%;
}

.col-lg-4 > p {
  background-color: white;
  border: 2px solid white;
  border-top-color: green;
  width: 200px;
  height: 160px;
  box-shadow: 10px 10px 15px;
}

.positions {
  margin-top: 60px;
  position: relative;
  margin-bottom: -50px;
  z-index: 2;
}

.positions > h1 {
  font-size: 30px;
  font-weight: bold;
}

.spanf {
  font-size: 18px;
  font-weight: bold;
}

.features {
  text-align: center;
  padding-bottom: 40px;
  width: 100%;
  margin: 0 auto;
  background-color: rgb(242, 243, 245);
  height: 1500px;
  z-index: 1;
  padding-top: 120px;
  margin-bottom: 0;
}

.features .row {
  border: 2px solid red;
  width: 65%;
  margin: 0 auto;
}

.features .row p {
  text-align: left;
  padding-left: 20px;
}

.features button {
  border-radius: 20px;
}

.features .row {
  margin-top: 40px;
}

.features img {
  width: 98%;
  height: 98%;
}

.features .row .col-lg-6 {
  padding-right: 15px;
  padding-left: 2px;
}

.imgright {
  position: relative;
  border: 3px solid rgb(72, 174, 137);
  top: 5%;
  width: 40%;
  padding-bottom: 0px;
  padding-right: 2px;
  padding-left: 0;
  margin-left: 20px;
  margin-top: 20px;
}

.img2 {
  position: relative;
  top: -25px;
  left: -20px;
  padding-bottom: 10px;
}

.imgleft {
  position: relative;
  border: 3px solid rgb(72, 174, 137);
  width: 40%;
  top: 5%;
  margin-left: 10px;
  margin-top: 20px;
}

.img3 {
  position: relative;
  top: -20px;
  padding-bottom: 10px;
  left: 40px;
}

.pillars {
  background-color: rgb(72, 174, 137);
  height: 350px;
  top: 0;
}

Answer 1

这是改变之后的CSS，其余的CSS将在那里。

.features img {
    /*   width: 98%; */
    /*   height: 98%; */
    left: 12px;
    top: -12px;
    box-shadow: -2px 2px 9px;
}

.features .row .col-lg-6 {
    /*   padding-right: 15px; */
    /*   padding-left: 2px; */
}

.img2 {
     position: relative;

     /*   padding-bottom: 10px; */
}

.imgleft {
    position: relative;
    border: 3px solid rgb(72, 174, 137);
    width: 40%;
    top: 5%;
    margin-left: 10px;
    margin-top: 20px;
    padding: 0;
}

.img3 {
    position: relative;
    left:30px;
    /*  top:-20px; */
    /*   padding-bottom: 10px; */

}

Answer 2

这里你已经定义了.img2和.img3类，你的结果是这些类的影响只是删除那些类然后它工作正常，检查我的代码片段

.box .img-responsive {       margin-top：-20px;   并从此处删除margin-top

＆＃13;

.container {
  text-align: center;
  width: 80%;
}

.first {
  background: rgb(0, 30, 58);
  color: white;
}

.span1,
.span2 {
  font-size: 36px;
  font-weight: bold;
}

.span1 {
  color: rgb(72, 174, 137);
}

[type="text"] {
  border-radius: 25px;
  padding-left: 5px;
}

[type="submit"] {
  color: white;
  background-color: rgb(72, 174, 137);
  border-radius: 25px;
  position: relative;
  margin-left: -25px;
}

.use {
  height: 85%;
  margin: 0 auto;
}

.box {
  border: 3px solid rgb(72, 174, 137);
  width: 55%;
  margin: 0 auto;
  max-height: 210px;
}

.box .img-responsive {
  margin-top: -20px;
}

.para {
  text-align: left;
  margin-right: 0;
  padding-right: 0;
  padding-top: 15px;
}

.para strong {
  font-weight: 900;
  font-size: 16px;
}

.second {
  margin-bottom: 30px;
  border: 1px solid green;
  width: 10%;
}

.threebox {
  width: 90%;
  margin: 0 auto;
  padding-left: 70px;
}

.col-lg-4 {
  height: 40%;
}

.col-lg-4 > p {
  background-color: white;
  border: 2px solid white;
  border-top-color: green;
  width: 200px;
  height: 160px;
  box-shadow: 10px 10px 15px;
}

.positions {
  margin-top: 60px;
  position: relative;
  margin-bottom: -50px;
  z-index: 2;
}

.positions > h1 {
  font-size: 30px;
  font-weight: bold;
}

.spanf {
  font-size: 18px;
  font-weight: bold;
}

.features {
  text-align: center;
  padding-bottom: 40px;
  width: 100%;
  margin: 0 auto;
  background-color: rgb(242, 243, 245);
  height: 1500px;
  z-index: 1;
  padding-top: 120px;
  margin-bottom: 0;
}

.features .row {
  border: 2px solid red;
  width: 65%;
  margin: 0 auto;
}

.features .row p {
  text-align: left;
  padding-left: 20px;
}

.features button {
  border-radius: 20px;
}

.features .row {
  margin-top: 40px;
}

.features img {
  width: 98%;
  height: 98%;
}

.features .row .col-lg-6 {
  padding-right: 15px;
  padding-left: 2px;
}

.imgright {
  position: relative;
  border: 3px solid rgb(72, 174, 137);
  top: 5%;
  width: 40%;
  padding-bottom: 0px;
  padding-right: 2px;
  padding-left: 0;
  margin-left: 20px;
  margin-top: 20px;
}



.imgleft {
  position: relative;
  border: 3px solid rgb(72, 174, 137);
  width: 40%;
  top: 5%;
  margin-left: 10px;
  margin-top: 20px;
}



.pillars {
  background-color: rgb(72, 174, 137);
  height: 350px;
  top: 0;
}

＆＃13;

<div class="container">

<div class="first">
<p>CONVERSIFIC</p>
<p><span class="span1">The 1st</span><br>Business Intelligence Platform<br><span class="span2">for Shopify</span></p>
<p>We show you how to grow your revenue<br><span class="span3">-all you have to do is take action</span></p>

<form>
<input type="text" placeholder="enter your email" name="email">
<input type="submit" name="submit"  value="Add me to Beta">
	</form>
	<p>Join our beta today,be the first to get access to Conversific</p>

</div><!--first div ends -->

<div class="use">
<h1>Why use Conversicif?</h1>
<hr class="firsth">

<div class="box row">
	<div class="col-lg-6 images">
		<img class="img-responsive " src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
	</div>
	<div class="col-lg-6 para">
	<p><strong>Conversific helps you make intelligent decisions to grow your business</strong><br>	
    There are plentfy of platforms that make it easy to capture data and analytics about your ecommerce site.But when it comes to understanding the data you've captured, it's not always clear what's important and where to make changes.</p>
	</div>

</div><!--box div ends -->
<div class="positions">
<h1>How does Conversific work?</h1>
<p>Say goodbye to gathering reports and analyzing data and head straight to decision making </p>
<hr class="second">
<div class="threebox row">
<div class="col-lg-4"><p>Conversific is installed onto your ecommerce store with just one click from your shopify store</p></div>
<div class="col-lg-4"><p>After the installation you just need to install google analytics</p></div>
<div class="col-lg-4"><p>Immediately after you have signed in you see a comprehensive reports overview</p></div>


</div><!--threebox row ends -->
</div><!-- positions div ends-->
</div><!--use div ends -->




<div class="features">
<h1> Features you'll love</h1>
<p>These are the features you are going to love no matter what<br>
	So, is this the end of the paragraph or what or are you gonna keep<br>
	typing till your fingers bleed??</p>

<div class="row">
	<div class="col-lg-6">
<p>ECOMMERCE FOCUS<br><span class="spanf">Decision Focused Dashboards To Supercharge Your Ecommerce Business</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
	<button>Join Now</button></p>
	</div>
	<div class="col-lg-6 imgright">
<img class="img-responsive img2 " src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
	</div>

</div><!-- row ends -->

<div class="row">
	<div class="col-lg-6 imgleft">
<img class="img-responsive img3" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
	</div>
	<div class="col-lg-6"><p>EASY TO UNDERSTAND<br><span class="spanf">Optimize Your Product & Category<br> Performance</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
	<button>Join Now</button></p></div>

</div><!-- row ends -->

<div class="row">
	<div class="col-lg-6"><p>INCREASE REVENUE<br><span class="spanf">Turbo Boost Your marketing and Find<br> Top Performing Marketing Channels</span><br>
See which marketing channels are the most effective for your business<br>and maximize your return on investment<br>
	<button>Join Now</button></p></div>
	<div class="col-lg-6 imgright">
<img class="img-responsive img2" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
	</div>

</div><!-- row ends -->

<div class="row">
	<div class="col-lg-6 imgleft">
<img class="img-responsive img3" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
	</div>
	<div class="col-lg-6"><p>ECOMMERCE FOCUS<br><span class="spanf">Decision Focused Dashboards To<br> Supercharge Your Ecommerce Business</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
	<button>Join Now</button></p></div>

</div><!-- row ends -->

</div><!-- features div ends -->
<div class="pillars">
	<h1>The 4 pillars of Conversific</h1>
	<p>Stop wasting time on your decision making process, increase revenue and reduce costs  </p>
<hr>





</div><!-- pillars div ends -->
<div class="team"></div>
<div class="end"></div>

</div><!-- container div ends -->

＆＃13;

图片未正确对齐

2 个答案: