logo标签列表

旋转div，绝对定位和响应式设计

htmlcss
4

我试图编写之前用Photoshop制作的设计，但我感觉我没有按照“正确”的方式操作，应该有另一种更好的方法来实现我的目标。

为了旋转div并保持链接的100%宽度a href属性，我使用了transform。但是这样会使内部所有内容也旋转45度。也许有更好的方法可以实现吗？因为我想稍后添加Jquery，不必旋转我在这些div中添加的每一个小东西。

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

我很乐意让网站响应式，但是由于某种原因，高度无法与其他百分比一起使用。例如，我希望div #midden的高度为总高度的24％，但保持正方形。我无法弄清楚如何做到这一点。 http://jsfiddle.net/AeFcY/1/ 最后是定位。我希望整个页面都在中心位置，但我唯一想到的方法是使用margin: 0 auto和绝对定位。但是，这会导致将div放在一起时非常麻烦...现在我通过将“right”属性从855px更改为-855px来定位它们。
HTML代码：
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>imandragrafie</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>

<div id="wrapper">
    <div id="links" class="zijden draai"><a href="#"></a></div>
    <div id="midden" class="draai"><a href="#"></a></div>
    <div id="rechts" class="zijden draai"><a href="#"></a></div>
</div>
</body>
</html>

CSS：

html, body, div#wrapper{
    background-color:#1b1b1b;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

div.draai{
    display:inline;
    padding:0;

    overflow:hidden;
    position:absolute;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

    background-size: cover;
}

div#midden{
    width:333px;
    height:333px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    background-image:url('../images/home_midden.png');
}

div.zijden{
    width:241px;
    height:241px;
    top: 0;
    bottom: 0;
    margin:auto;
    background-color:blue;
}

div#links{
    background-image:url('../images/home_links.png');
    left: 0;
    right: 855px;
}

div#rechts{
    background-image:url('../images/home_rechts.png');
    left: 0;
    right: -855px;

}

a{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    position:absolute;
    right:0;
}
我会使用旋转图像来实现这个目的...我在这里看不到通过CSS旋转它们的任何优势... - Aamir Shahzad
那么在这些方框中的内容的正确解决方案是什么呢：将这些方框中的“包装器”旋转-45度？那样行得通吗？ - Lisa
1个回答
5
我找到了如何做到这一点的方法！
我使用了以下资料: http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/ 如何在所有浏览器中垂直居中div？ 我必须应用多个包装器，并通过使用padding-bottom来实现响应式正方形。 JSfiddle：http://jsfiddle.net/ZC9et/ HTML:
<div class="outer"><div class="middle"><div class="wrap"> <!-- Open .wrap -->

  <div class="box side left"><!-- Open .box -->
    <a href="#" class="boxInner innerLeft"><!-- Open .boxInner -->
    </a><!-- Close .boxInner -->
  </div><!-- Close .box -->

  <div class="box"><!-- Open .box -->
    <a href="#" class="boxInner innerMiddle"><!-- Open .boxInner -->
    </a><!-- Close .boxInner -->
  </div><!-- Close .box -->

  <div class="box side right"><!-- Open .box -->
    <a href="#" class="boxInner innerRight"><!-- Open .boxInner -->
    </a><!-- Close .boxInner -->
  </div><!-- Close .box -->

  </div></div></div><!-- Close .wrap -->

CSS（层叠样式表）：
body {
        margin: 0;
        padding: 0;
        background-color:#1b1b1b;
    }

    .outer{
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .middle{
        display: table-cell;
        vertical-align: middle;
    }
    .wrap {
        margin: 10px;
        margin-left: auto;
        margin-right: auto; 
        height:100%;
        overflow: hidden;


        -webkit-box-align:center;
        -webkit-box-pack:center;
        display:-webkit-box;
    }

    .box {
        float: left;
        position: relative;
        width: 24.45%;
        padding-bottom: 24.45%;

        margin:auto;

        top:0;
        bottom: 0;
        left: 0;
        right: 0;

        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .side {
        width: 17.57%;
        padding-bottom: 17.57%;
    }

    .left{
        left:-8%;
    }

    .right{
        left:8%;
    }

    .boxInner {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
        overflow: hidden;

        background-size: cover;
        background-repeat:no-repeat;
    }

    .innerLeft{
        background-color:blue;
    }
    .innerMiddle{
        background-color:blue;
    }
    .innerRight{
        background-color:blue;
    }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接