Question

我一直致力于一项给我带来麻烦的设计。 This is how it should look

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

我目前已经设置了媒体查询以缩小图像并在屏幕尺寸变小时堆叠在文本部分下;然而，当窗口大小正在变小时，它会丢弃文本下的图像并留下很大的空白区域。

此外，在全分辨率下，图像与文字之间存在差距，但我似乎无法让它们彼此相邻。有什么我可以做的事情会让这个设计更容易实现吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

在元素宽度中使用％而不是数字px：对于图像块和文本块，使用50％-50％，使用display:inline-block将它们放在一起< / p>
使用像Bootstrap或Foudation这样的CSS框架，在您的案例中使用的最佳示例是media

<强> EDIT1 使用codepen进行更新：http://codepen.io/thovo/pen/EKwYpq

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

1 个答案: