如何在文本旁边浮动图像并在较小的屏幕上堆叠

Question

我一直在做一个给我带来一些麻烦的设计。 This is how it should look

我的代码与此设计非常相似，但我无法使其正确匹配。

我目前设置了一个媒体查询来缩小图像并随着屏幕尺寸变小而堆叠在文本部分下；然而，虽然窗口大小正在变小，但它会将图像放在文本下方并留下很大的空白区域。

此外，在全分辨率下，图像和文本之间存在间隙，但我似乎无法让它们并排放置。我可以做些什么来让这个设计更容易实现吗？

.redText{
	background-color: #f0f0f0;
	max-width: 400px;
	display: block;
	float: left;
	padding-left: 10%;
}
	.redText h1{
		font-size: 40px;
		color: #424242;
		padding: 45px 20px 40px 20px;
	}
	.redText h2{
		color: #d0112b;
		padding: 0px 20px 40px 20px;
		margin-top: -66px;
		border-bottom: 10px solid #d0112b;
	}
	.redText p{
		font-size: 18px;
		line-height: 24px;
		color: #424242;
		padding: 0px 20px 110px 20px;
	}
.redMore a{
	text-decoration: none;
}

.blueText{
	background-color: #f0f0f0;
	max-width: 400px;
	display: block;
	float: right;
	padding-right: 10%
}
	.blueText h1{
		font-size: 40px;
		color: #424242;
		padding: 45px 20px 40px 20px;
	}
	.blueText h2{
		color: #0a5587;
		padding: 0px 20px 40px 20px;
		margin-top: -66px;
		border-bottom: 10px solid #0a5587;
	}
	.blueText p{
		font-size: 18px;
		line-height: 24px;
		color: #424242;
		padding: 0px 20px 110px 20px;
	}
.blueMore a{
	text-decoration: none;
}

.space{
	float: right;
}

.wrapper{  
	overflow: hidden;
}

.redImg img{
	float: right; 
	max-width: 100%;
}
.blueImg img{
	float: left; 
	max-width: 100%;
}

@media screen and (max-width: 480px) {
	.redImg img{ 
		float: none;
		margin-left: 0;
		width: auto;   
	}
	.blueImg img{ 
		float: none;
		margin-right: 0;
		width: auto;   
  	}
}

<div class="wrapper">
                <div class="redText">
                	<h1>RETAIL</h1><br>
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br>
                    <div style="clear: both"></div>
                    
                    <div class="redMore">
                        <a href="#"><h2>LEARN MORE<span class="space">></span></h2></a>
                    </div> 
                </div>
                
                <div class="redImg"><img src="images/work/retail.jpg"></div>
            </div>


            <div class="wrapper">
                <div class="blueText">
                	<h1>INDUSTRIAL</h1><br>
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br>
                    <div style="clear: both"></div>
                    
                    <div class="blueMore">
                        <a href="#"><h2>LEARN MORE<span class="space">></span></h2></a>
                    </div> 
                </div>
                
                <div class="blueImg"><img src="images/work/industrial.jpg"></div>
            </div>


            <div class="wrapper">
                <div class="redText">
                	<h1>COMMERCIAL</h1><br>
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br>
                    <div style="clear: both"></div>
                    
                    <div class="redMore">
                        <a href="#"><h2>LEARN MORE<span class="space">></span></h2></a>
                    </div> 
                </div>
                
                <div class="redImg"><img src="images/work/commercial.jpg"></div>
            </div>


             <div class="wrapper">
                <div class="blueText">
                	<h1>HOTELS</h1><br>
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br>
                    <div style="clear: both"></div>
                    
                    <div class="blueMore">
                        <a href="#"><h2>LEARN MORE<span class="space">></span></h2></a>
                    </div> 
                </div>
                
                <div class="blueImg"><img src="images/work/hotels.jpg"></div>
            </div>

Answer 1

有几种方法可以解决您的问题：

1. 在元素的宽度中使用 % 而不是数字 px：图像块和文本块使用 50%-50%，使用 display:inline-block 将它们彼此相邻

2. 使用像 Bootstrap 或 Foudation 这样的 CSS 框架，在您的情况下使用的最佳示例是 media

EDIT1 使用 codepen 更新：http://codepen.io/thovo/pen/EKwYpq