Question

我在为实习编写概念设计时遇到了麻烦，我正在寻找一个包含六个可点击元素（即图片）的页面。单击一个，其他人消失，活动的一个移动到顶部。通过使用左定位和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>

如果更容易修复旧代码以使元素保持不变甚至更好。

Answer 1

快速修复（我不是很喜欢）将使用正确的浮动，并反转标记中的顺序。浮动规范的一部分基本上表明跟随浮动元素必须永远不要垂直高于前面的浮动元素。

但是，我不认为浮动是你想要的。最好使用display: inline-block来表示这些元素。更好的是，如果你能够支持现代浏览器，使用表格布局（display: table/table-cell，而不是表格元素）会使这变得非常简单。

Answer 2

我搞砸了你的代码，但我不得不删除并清理了一堆东西，所以我不能100％确定这是否是你想要的。但是这里a demo仅使用左浮动。

如果您只是展开选定的div以填充窗口，我认为它可能看起来更好（不那么跳跃）......嗯，如果那是你的意图。

也许您可以更改我共享的演示或描述单击某个块时会发生什么。

将float元素格式化为同一级别

2 个答案: