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

Question

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

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

我目前使用媒体查询对其进行设置，以在屏幕尺寸变小时缩小图像并堆叠在文本部分下方；然而，虽然 window 尺寸正在变小，但它会将图像放在文本下方并留下大的白色 space.

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

.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

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

在元素的宽度中使用 % 而不是数字像素：图像块和文本块使用 50%-50%，使用 display:inline-block 将它们放在下一个彼此
使用 CSS 框架，例如 Bootstrap 或 Foudation，在您的情况下使用的最佳示例是 media

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

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

How to float image next to text and stack on smaller screen

css

image

css-float

text-align

responsive