格式化浮动元素在同一水平

我一直在为我的实习写一个概念设计时遇到困难，即时通过六个可点击的元素（它们是图片）去寻找页面。一旦点击了其他人，其他人就会消失，活跃的人就会移动到顶部。我通过使用左侧定位和jquery来完成所有这些工作。然而，在左侧定位的情况下，这些元素将以不同的屏幕分辨率移动。所以我决定使用浮动，所以有位置将是不变的。我需要左边浮动的元素与右对齐的浮线垂直排列。这是它目前的样子的截图。 click here这就是我想要的样子。 finished look 格式化浮动元素在同一水平

这里是我当前的代码

<html> 
<head> 
<title> Div Blocks</title> 

<style type="text/css"> 
body { 
     background: url(bgp.jpg) no-repeat fixed center center; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    height:100%; 
    width:100%; 

} 
div.sep { 

clear: both; 

} 


div.full 
{ 
left:50%; 
height:auto; 
width:auto; 

} 

    a{ 
    cursor : url("nav.png"), pointer; 
    } 

    div.one a 
{ 

top:50px; 
float:left; 
width: 400px; 
height: 100px; 
text-decoration:none; 
background:url("branding.png"); 
background-repeat:no-repeat; 
padding-bottom:35px; 
} 
div.one a:hover 
{background: url("brandingalt.png"); 

background-repeat:no-repeat; 
} 
div.one a:active 
{background: url("brandingalt.png"); 

background-repeat:no-repeat; 
} 

div.two a 
{ 

top:264px; 
float:left; 
width: 400px; 
height: 100px; 
text-decoration:none; 
background:url("marketing.png"); 
background-repeat:no-repeat; 
padding-bottom:35px; 
} 
div.two a:hover 
{background: url("marketingalt.png"); 

background-repeat:no-repeat; 

} 
div.three a 
{ 

top:457px; 
float:left; 
width: 500px; 
height: 100px; 
text-decoration:none; 
background:url("ecommerce.png"); 
background-repeat:no-repeat; 
padding-bottom:20px; 
} 
div.three a:hover 
{background: url("ecommercealt.png"); 

background-repeat:no-repeat; 
} 

div.r1 a 
{ 

top:50px; 
float:right; 
width: 400px; 
height: 100px; 
text-decoration:none; 
background:url("webdesign.png"); 
background-repeat:no-repeat; 
padding-bottom:25px; 
} 
div.r1 a:hover 
{background: url("webdesignalt.png"); 

background-repeat:no-repeat; 
} 

div.r2 a 
{ 

top:254px; 
float:right; 
width: 450px; 
height: 150px; 
text-decoration:none; 
background:url("optimization.png"); 
background-repeat:no-repeat; 
padding-bottom:20px; 
} 
div.r2 a:hover 
{background: url("optimizationalt.png"); 
background-repeat:no-repeat; 
} 
div.r3 a 
{ 

top:457px; 
float:right; 
width: 400px; 
height: 75px; 
text-decoration:none; 
padding-bottom: 20px; 
background:url(packaging.png); 
background-repeat:no-repeat; 
} 
div.r3 a:hover 
{background: url("packagingalt.png"); 
background-repeat: no-repeat; 
} 

</style> 
</head> 
<body> 




    <div class="one"> 
<a href="#" value="Branding" class="go" ></a> 
    </div><div class="sep"></div> 
    <div class="r1"> 
<a href="#"class="go" ></a> 
    </div><div class="sep"></div> 

    <div class="two"> 
<a href="#" class="go"></a> 
    </div><div class="sep"></div> 

     <div class="r2"> 
<a href="#"class="go" ></a> 
    </div><div class="sep"></div> 


    <div class="three"> 
<a href="#"class="go" ></a> 
    </div><div class="sep"></div> 

<div class="r3"> 
<a href="#"class="go" ></a> 
    </div><div class="sep"></div> 





    </body> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script> 


$("a").click(function(event){ 
    event.preventDefault(); // prevent the link from changing the location 
    $(this) 
     .closest("div") // select the parent div of the link 

     .siblings() // select all the siblings of the div 
     .hide("slow") // hide them 
setTimeout(function() { 

$(".go").animate({top: "0"}, "slow");},1500); 

});

这里是我的旧代码

<html> 
<head> 
<title> Div Blocks</title> 

<style type="text/css"> 
html { 
     background: url(bgo.jpg) no-repeat fixed center center; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 



} 

    a{ 
    cursor : url("nav.png"), pointer; 
    } 

    div.one a 
{ 
position:absolute; 
top:50px; 
left:60px; 
width: 400px; 
height: 100px; 
text-decoration:none; 
background:url("branding.png"); 
background-repeat:no-repeat; 
padding-bottom:35px; 
} 
div.one a:hover 
{background: url("brandingalt.png"); 
background-position: 0px 0px; 
background-repeat:no-repeat; 
} 
div.one a:active 
{background: url("brandingalt.png"); 
background-position: 0px 0px; 
background-repeat:no-repeat; 
} 

div.two a 
{ 
position: absolute; 
top:264px; 
left:60px; 
width: 400px; 
height: 100px; 
text-decoration:none; 
background:url("marketing.png"); 
background-repeat:no-repeat; 
padding-bottom:35px; 
} 
div.two a:hover 
{background: url("marketingalt.png"); 
background-position:0px 0px; 
background-repeat:no-repeat; 

} 
div.three a 
{ 
position: absolute; 
top:457px; 
left:56px; 
width: 500px; 
height: 100px; 
text-decoration:none; 
background:url("ecommerce.png"); 
background-repeat:no-repeat; 
padding-bottom:20px; 
} 
div.three a:hover 
{background: url("ecommercealt.png"); 
background-position: 0 0px; 
background-repeat:no-repeat; 
} 

div.r1 a 
{ 
position: absolute; 
top:50px; 
left:900px; 
width: 400px; 
height: 100px; 
text-decoration:none; 
background:url("webdesign.png"); 
background-repeat:no-repeat; 
padding-bottom:25px; 
} 
div.r1 a:hover 
{background: url("webdesignalt.png"); 
background-position: 0px 0px; 
background-repeat:no-repeat; 
} 

div.r2 a 
{ 
position: absolute; 
top:254px; 
left:900px; 
width: 450px; 
height: 150px; 
text-decoration:none; 
background:url("optimization.png"); 
background-repeat:no-repeat; 
padding-bottom:20px; 
} 
div.r2 a:hover 
{background: url("optimizationalt.png"); 
background-repeat:no-repeat; 
} 
div.r3 a 
{ 
position: absolute; 
top:457px; 
left:900px; 
width: 400px; 
height: 75px; 
text-decoration:none; 
padding-bottom: 20px; 
background:url(packaging.png); 
background-repeat:no-repeat; 
} 
div.r3 a:hover 
{background: url("packagingalt.png"); 
background-repeat: no-repeat; 
} 

</style> 
</head> 
<body> 



    <div class="one"> 
<a href="#" value="Branding" class="go" ></a> 
    </div> 

    <div class="two"> 
<a href="#" class="go"></a> 
    </div> 
    <div class="three"> 
<a href="#"class="go" ></a> 
    </div> 

    <div class="r1"> 
<a href="#"class="go" ></a> 
    </div> 
     <div class="r2"> 
<a href="#"class="go" ></a> 
    </div> 

      <div class="r3"> 
<a href="#"class="go" ></a> 
    </div> 




    </body> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script> 


$("a").click(function(event){ 
    event.preventDefault(); // prevent the link from changing the location 
    $(this) 
     .closest("div") // select the parent div of the link 

     .siblings() // select all the siblings of the div 
     .hide("slow") // hide them 
setTimeout(function() { 

$(".go").animate({top: "0"}, "slow");},1200); 

}); 



</script>

如果它会更容易修复旧代码，以使元素常数会更好。

来源

2011-12-26 matture

一个快速修复（我真的不喜欢）将使用权利花车，并扭转您的标记中的顺序。浮动规范的一部分基本上规定，浮动元素之后不得垂直于前面的浮动元素。

但是，我不认为浮动是你想要的。对于这些元素，使用display: inline-block会更好。更好的是，如果你能负担得起仅仅支持现代浏览器，使用表格布局（display: table/table-cell，而不是表格元素）会使这很容易。

来源

2011-12-26 18:55:26 kojiro

能否详细介绍一下如何使用（display：table/table-cell） – matture

也许这个[jsfiddle]（http://jsfiddle.net/NXZzN/）可以更好地解释它。 – kojiro

之前我尝试重新编码整个事情我有几个问题， 1.我能够使用悬停效果来更改图像 2.我仍然能够使用jquery函数来隐藏元素并提高点击时他们中的一个到顶部？ – matture

我搞砸了你的代码，但我不得不删除和清理一堆东西，所以我不能100％确定如果这是你想要的。但是这里的a demo只使用左侧浮线。

如果你只是扩大了选定的div来填满窗口，我认为它可能会更好看（更少跳跃）......如果这是你的意图。

也许您可以更改我共享的演示或描述单击块时发生的情况。

来源

2011-12-26 19:16:41 Mottie

除了垂直布局之外，这看起来工作得很好，以及扩展选定的div以填充窗口的含义是什么？非常感谢您的帮助 – matture

我的意思是，而不是隐藏所有其他divs，展开选定的div来填满窗口。有点像灯箱会做什么：http://tympanus.net/Tutorials/CSS3Lightbox/ – Mottie

格式化浮动元素在同一水平

回答

相关问题