动态网站CSS翻转- 100% DIV高度内DIV与CSS显示=table-cell

我想我可能是1000个寻找这个答案的人之一。但是似乎没有人能回答这个问题。我有一个动态的网站，我试图得到一个100%的高度div内另一个div与class=table-cell..我实际上是在尝试使用纯css创建翻转效果。并且div在td里面不能工作…

我已经设置了一个JSFiddle在http://jsfiddle.net/RedEarthDesigns/uwXf6/3/

<div class="div-table">
    <div class="div-td venue">
        <div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p> <p>More Info</p></span>
        </div>
    </div>
    <div class="div-td venue">
        <div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400, 300); body { margin:0; font-family:'Source Sans Pro', sans-serif; background-color:#111; } p { font-size:12px; color:#eee; line-height: 6px; } h1 { font-size:24px; color:#eee; } .div-table { display:table; width:100%; height:500px; padding:0; margin:0; border-collapse:collapse; } .div-row { display:table-row; } .div-td { display:table-cell; height:33%; width:20%; text-align:right; vertical-align:bottom; overflow:hidden; } .hidden span { height:100%; min-height:100%; width:auto; vertical-align:text-bottom; padding:10px; transform:translate(9999px); opacity:0; } .hidden:hover span { height:100%; min-height:100%; width:auto; vertical-align:text-bottom; padding:10px; display:block; transform:translate(0); opacity:1; } .venue { background-image:url(http://www.indpg.com.au/img/norman.jpg); background-size:cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-repeat:no-repeat; } .div-td:hover { background-image:none; }

你最好的选择是使用inline-block元素和box-size:border box属性。

<div class="wrapper"> <div class="row">some content</div> <div class="row">some content</div> </div>
和css

body, html {height:100%;} .wrapper {height:100%;box-sizing:border-box;background:black;} .row {background:red;display:inline-block;width:30%;height:100%;}
box-sizing: border-box解决了这种布局中的许多问题，并使其他需求更容易实现。

下面是jsfiddle

中的示例

OK!所以@DanielPerván已经回答了这个问题，并在http://jsfiddle.net/uwXf6/4/
上放了一个JSFiddle

<div class="div-table"> <div class="div-td venue"> <div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p> <p>More Info</p></span> </div> </div> <div class="div-td venue"> <div class="hidden"><span><h1>Venue Name</h1><p>Venue Address</p><p>Venue Website</p><p>More Info</p></span> </div> </div> </div>
CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400, 300); body { margin:0; font-family:'Source Sans Pro', sans-serif; background-color:#111; } p { font-size:12px; color:#eee; line-height: 6px; } h1 { font-size:24px; color:#eee; } .div-table { display:table; width:100%; height:500px; padding:0; margin:0; border-collapse:collapse; } .div-row { display:table-row; } .div-td { display:table-cell; height:33%; width:20%; text-align:right; vertical-align:bottom; overflow:hidden; } .hidden span { height:100%; min-height:100%; width:auto; vertical-align:text-bottom; padding:10px; -webkit-transform:translate(500px); -moz-transform:translate(500px); transform:translate(500px); opacity:0; display:block; -webkit-transition: -webkit-transform .5s, opacity 1s; -moz-transition: -moz-transform .5s, opacity 1s; transition: transform .5s, opacity 1s; } .hidden:hover span { height:100%; min-height:100%; width:auto; vertical-align:text-bottom; padding:10px; -webkit-transform:translate(0); -moz-transform:translate(0); transform:translate(0); opacity:1; } .venue { background-image:url(http://www.indpg.com.au/img/norman.jpg); background-size:cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-repeat:no-repeat; } .div-td:hover { background-image:none; } .hidden { height: 100%; }
作品完美!太棒了! !

相关内容

最新更新

热门标签：