旋转div，绝对定位和响应答案

【问题标题】：Rotating div's, absolute positioning and responsive-ness旋转div，绝对定位和响应
【发布时间】：2014-07-06 23:18:52
【问题描述】：

我正在尝试编写我之前在 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/

最后是定位。我希望整个东西都在页面的中心，但我想出用边距做到这一点的唯一方法：0 自动和绝对定位。但是，这为将 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 旋转它们没有优势...
那么，对于框中的内容，正确的解决方案是什么：将框内内容的“包装器”旋转 -45 度？这行得通吗？

标签： html css

【解决方案1】：

我想出了如何做到这一点！

我使用了以下来源： http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/ How to vertically center a div for all browsers?

我必须应用多个包装器，并且通过使用 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;
    }

【讨论】：