文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >将浮动元素的格式设置为在同一级别上

问将浮动元素的格式设置为在同一级别上
EN

Stack Overflow用户
提问于 2011-12-27 02:34:02
回答 2查看 155关注 0票数 2

我在为我的实习写一个概念设计时遇到了麻烦，我想要一个有六个可点击元素(即图片)的页面。一旦其中一个被点击，其他的就会消失，活动的那个就会移到顶部。通过使用left定位和jquery，我实现了所有这些功能。然而，使用左侧定位时，元素将以不同的屏幕分辨率移动。所以我决定使用浮点数来代替，这样它们的位置将是恒定的。我需要的是漂浮在左边的元素是垂直排列的浮动是对齐的权利。这是它当前的屏幕截图。click here，这就是我想要的样子。finished look

以下是我当前的代码

代码语言：javascript
复制
<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);

});

​

这是我以前的代码

代码语言：javascript
复制
<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>

如果修复旧代码使元素保持不变会更容易，那就更好了。

javascript
jquery
html
css
EN

回答 2

Stack Overflow用户

发布于 2011-12-27 02:55:26

一个快速的解决方法(我并不是很喜欢)是使用右浮动，并颠倒标记中的顺序。浮动规范的一部分本质上规定，后面的浮动元素永远不能垂直地位于前面的浮动元素的上方。

然而，我认为浮动根本不是你想要的。对于这些元素，最好使用display: inline-block。更好的是，如果您能够负担得起只支持现代浏览器，那么使用表布局(display: table/table-cell，而不是表元素)将使这一点变得非常容易。

票数 0
EN

Stack Overflow用户

发布于 2011-12-27 03:16:41

我弄乱了你的代码，但我不得不删除和清理一堆东西，所以我不能百分之百确定这是否是你想要的。但是这里的a demo只使用了左边的浮点数。

我认为如果你只是展开选定的div来填充窗口，它会看起来更好(不那么跳跃)……嗯，如果这是你的意图。

也许你可以改变我分享的演示，或者描述当一个区块被点击时会发生什么。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/8638232

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档