0

我一直在研究一个给我带来麻烦的设计。这是它应该看起来的样子

我的代码与这个设计非常相似，但我无法让它正确适配。

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

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

.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>

4

1 回答 1

1

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

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

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

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

于 2016-03-30T16:11:53.857 回答