Question

是否可以在HTML / CSS中执行此操作：desired result

有我的代码：

<!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">
      <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>`

但是，结果并不好..粉红色div之间有一个空格，因为黄色div。

Answer 1

添加：

position:absolute;

到你的com课程。

Div垂直和水平

1 个答案: