Question

我正在尝试编写我之前在photoshop中制作的设计，但我感觉我不是以“正确”的方式做事，应该有另一种更好的方法来实现我想要的

要旋转div并将其保持为100％宽度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自动和绝对定位。但是，这给了一个将divs放在彼此旁边的工作......现在我通过将'right'属性从855px更改为-855px来定位它们。

HTML code：

<!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;
}

Answer 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;
    }

旋转div，绝对定位和响应性

1 个答案: