左侧浮动的div重叠。我不想让它们重叠

Question

我希望能够浮动一，二和鳍的div，同时让它们不会在另一个上重叠。现在，当它在一个较小的屏幕上观看时，鳍上的顶部和顶部上的两个顶部。

任何形式的帮助在这个方向将不胜感激。

下面是HTML代码：

<div class="iwrapper"> 
    <div class="one"> 
    <center> 
    <div id="i1"> 
    </div> 
    <div> 
     <span class="img-tag">The BALD DESIGNER Look</span> 
    </div> 
    </center> 
</div> 
<div class="two"> 
<center> 
    <div id="i2"> 
    </div> 
    <div> 
    <span class="img-tag">Meet TECHNODEN- My Home Design Space</span> 
    </div> 
</center> 
</div> 

<div class="fin"> 
    <a href="http://www.vrohit.com/wp-content/uploads/2014/01/Resume_RohitVairamohan.pdf" target="_blank">Grab my Resume</a> 
    <div class="descpt">Facts about Me</div><div style="font-size: 90%; font-weight: 400; line-height: 1.7em;" > 
    > I love to go hiking and on adventure trails. This helps me often think of adventurous and innovative solutions to critical problems. 
    > Being a trained classical singer, I introduce new rhythm into my designs. 
    > I am good at finding an organization among my disorganized belongings and this helps me be clinical and find patterns during my research. 
    > And Yes, you may have guessed it by now; my favorite color is Green. 
    </div> 
</div> 
<div class="clear12fin"></div> 
</div> 

，这里是与它相关的CSS：

.clear12fin{ 
clear: both; 
} 

.iwrapper { 
width:99%; 
} 

#i1{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/my-picg.png"); 
width:300px; /*image width*/ 
height:300px; /*image height*/ 
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
-o-transition: all 1s ease; 
transition: all 1s ease; 
} 

#i1:hover{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/my-pic.png");} 

#i2{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/designspaceg.png"); 
width:300px; /*image width*/ 
height:300px; /*image height*/ 
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
-o-transition: all 1s ease; 
transition: all 1s ease; 
} 

#i2:hover{background-image:url("http://www.vrohit.com/wp-content/uploads/2014/01/designspace.png");} 



.one{float:left; width:32%; margin-right:1%;} 
.two{float:left; width:32%; margin-right:1%;} 
.fin{display:inline-block; width:33%; 
} 

Answer 1

设置在最小宽度.iwrapper

CSS

.iwrapper { 
    width:99%; 
    min-width: 930px; /* image width plus 30px for a 10px margin between divs*/ 
} 

小提琴 - Fiddle Link!

Answer 2

请使用@media查询使您的页面响应...您可以通过在您的css中使用@media设置基于屏幕大小的元素定位..如果您需要帮助与此，让我知道..