0

是的,我已经看到了几十个关于 100% div 的问题。但我仍然无法实现它。因为我在右侧 div 上使用了负边距。

测试版在这里:http ://bazarak.af/t.php

如果我从螺旋类中删除高度键,则不会出现金属螺旋。请有人帮助我。我只希望螺旋出现在内容旁边。

我可以使用 javascript,但不是每个人都启用了 javascript。

由于我要在问题解决后删除测试页面,所以这里是其他人的代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>TEST</title>

<style type="text/css">
.wrapper{
margin: 0px auto; 
background-color: white;
border: 1px solid #CCC;
width: 1030px;
}

body{
background-color: #f3f0e6;
height: 100%;
margin-top: 30px;
}

.content{
float: left;
width: 960px;
padding: 15px;
}

.spiral { 
float: right;
margin-right: -32px;

width:63px; 
height: 500px;

background-image:url(images/home/spiral.jpeg);
background-repeat:repeat-y;
background-position:top left;
}

.clear{clear: both;}
</style>


</head>
<body>

    <div class="wrapper">
        <div class="spiral"></div><!-- END SPIRAL -->
        <div class="content">

        [HEADER]</br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br></br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</br></br></br></br> [FOOTER]

        </div><!-- END CONTENT -->
        <div class="clear"/>
    </div><!-- END WRAPPER -->



</body>
</html>
4

2 回答 2

0

您正在寻找display: table-cell;. 看到这个小提琴:http: //jsfiddle.net/RZBAg/

(HTML 标记发生了一些变化,因为螺旋线位于内容之后。我还添加了一个红色背景来说明螺旋线 div 的大小。)

于 2012-05-08T15:28:05.010 回答
0

这是基于我的评论的答案。

jsfiddle.net/kxwgJ/1

我只是从螺旋容器中取出“浮子”并将其完全定位。由于螺旋只是一种设计,并且相对于其父级定位,因此绝对定位似乎更有意义,您可以避免浮动的一些问题。

于 2012-05-08T19:01:17.357 回答