html - 以滑出 div 的方式 float 图像

Question

我想以滑出 div 的方式 float 图像。我什至为图像添加了负边距，但实际情况是 iPhone 图像一直被截断。

我也尝试包括图像的高度和宽度，但没有任何效果。

请帮忙。

.blue-wrapper {
  background: #41A7D3;
  width: 100%;
  overflow: hidden;
}
.blue {
  width: 1000px;
  margin: 0 auto;
  padding: 0;
}
.blue-left {
  float: left;
  width: 39%;
}
.blue-left img {
  display: block;
  margin-top: -100px;
  width: 380px;
  height: 739px;
}
.blue-right {
  float: right;
  width: 61%;
  color: #FFFFFF;
}

<div class="blue-wrapper">
  <div class="blue">

    <div class="blue-left">
      <img src="https://feverweb.s3.amazonaws.com/landing/images/iphone-white.png" alt="3rd iPhone">
    </div>
    <!-- Blue Left -->

    <div class="blue-right">

      <div class="blue-text">
        <h2>What ComeAgain Can Do for Your Business</h2>
        <p>Lorem ipsum dolor sit amet, id sonet conclusionemque mel, denique nominavi instructior at mea. Ea utamur persecuti vis. Omnes perfecto menandri est ut, quot nonumy vix at. Et vix vocent corrumpit definiebas. Ut legere vocibus fierent nec, ei dicit
          everti patrioque sed. Mel verear impetus et, fugit vocent ut nam.
        </p>

        <h3>How ComeAgain Works</h3>
        <ul>
          <li>You always get a Reward with your 1st Purchase at any ComeAgain Location!</li>
          <li>Then ComeAgain… when you fill up a Rewards Card, you get a Free Reward!</li>
        </ul>
      </div>
      <!-- Blue Text -->

      <div class="blue-button">
        <a href="#">Get Registered</a>
      </div>
      <!-- Blue Button -->

    </div>
    <!-- Blue Right -->

  </div>
  <!-- Blue -->
</div>
<!-- Blue Wrapper -->

Answer 1

.blue-wrapper {
	background: #41A7D3; 
	width: 100%; 
}

.blue {
	width: 1000px; 
	margin: 0 auto; 
	padding: 0; 
}

.blue-left {
	float: left;  
	width: 39%;
    position: relative;

}

.blue-left img {
    display: block;
    top: 100px;
	width: 380px; 
	height: 739px; 
    position: absolute;
}
	

.blue-right {
	float: right; 
	width: 61%; 
	color: #FFFFFF;
}
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

<div class="blue-wrapper clearfix">
                    <div class="blue">
                    			
                                <div class="blue-left">
                                		<img src="https://feverweb.s3.amazonaws.com/landing/images/iphone-white.png" alt="3rd iPhone">
                                </div><!-- Blue Left --> 
                                
                                <div class="blue-right">
                                		
                                      <div class="blue-text">
                                                <h2>What ComeAgain Can Do for Your Business</h2>
                                                <p>Lorem ipsum dolor sit amet, id sonet conclusionemque mel, denique nominavi instructior at mea. 
                                                Ea utamur persecuti vis. 
                                                Omnes perfecto menandri est ut, quot nonumy vix at. Et vix vocent corrumpit definiebas. 
                                                Ut legere vocibus fierent nec, ei dicit everti patrioque sed. Mel verear impetus et, fugit vocent ut nam.
                                                </p>
                                                
                                                <h3>How ComeAgain Works</h3>
                                                <ul>
                                                    <li>You always get a Reward with your 1st Purchase at any ComeAgain Location!</li>
                                                    <li>Then ComeAgain… when you fill up a Rewards Card, you get a Free Reward!</li>
                                                </ul>
                                        </div><!-- Blue Text --> 
                                        
                                        <div class="blue-button">
                                        		<a href="#">Get Registered</a>
                                        </div><!-- Blue Button --> 
                                
                                </div><!-- Blue Right --> 
                    
                    </div><!-- Blue --> 
	</div><!-- Blue Wrapper --> 

对于背景，您应该在包装器上添加一个 .clearfix。