[英]Divs that are floated left are overlapping. I dont want them to overlap
我希望能夠使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%;
}
在.iwrapper
上設置最小寬度
的CSS
.iwrapper {
width:99%;
min-width: 930px; /* image width plus 30px for a 10px margin between divs*/
}
小提琴- 小提琴鏈接!
請使用@media查詢使您的頁面具有響應性...您可以通過在CSS中使用@media來根據屏幕尺寸設置元素的位置。如果您需要幫助,請告訴我。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.