Question

我希望能够将div 1,2和fin浮动，同时让它们不重叠在另一个上。现在它已经设置好了，当我在一个较小的屏幕上看一下时，鳍落在两个顶部的顶部，两个放在顶部。

对此方向的任何帮助都表示赞赏。

这是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根据屏幕大小设置元素的位置..如果您需要帮助，请告诉我。

左侧浮动的Div是重叠的。我不希望它们重叠

2 个答案: