Div vertical and horizontale
is it possble to do that in HTML/CSS : desired result
There is my code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com"开发者_JAVA百科>
<style> body { font-family: 'Lucida Grande', Verdana, Arial, sans-serif; }
.box {
border: 3px solid black;
background-color:pink;
width:auto;
display: table;
white-space: nowrap;}
.com {
background-color:yellow;
border: 3px solid black;
-moz-transform: rotate(90deg) translateY(-40px) ;
-o-transform: rotate(90deg) translateY(-40px) ;
-webkit-transform: rotate(90deg) translateY(-40px) ;
transform: rotate(90deg) translateY(-40px) ;
-moz-transform-origin: 0% 0% ;
-o-transform-origin: 0% 0% ;
-webkit-transform-origin: 0% 0% ;
transform-origin: 0% 0% ;
display: table;
white-space: nowrap;
}
</style>
<title>css</title>
</head>
<body >
<div>
<div style="float:left; border: 1px solid black; ">
<div class=box>DIV-111111</div>
<div class=com>DIV-2222222222</div>
</div>
<div style="float:left; border: 1px solid black; ">
<div class=box>DIV-33</div>
<div class=com>DIV-44444444</div>
</div>
<div style="float:left; border: 1px solid black; ">
<div class=box>DIV-55555555555555555</div>
<div class=com>DIV-6666666666666666666666</div>
</div>
</div>
</body>
</html>`
But, the result is not good.. there is a blank space between the pink div because of the yellow div.
Add:
position:absolute;
to your com class.
加载中,请稍侯......
精彩评论