Question

我在尝试构建下面的模型时遇到了很大的问题。深灰色将保持导航，浅灰色将垂直向下运行文本。浅灰色的文本会有所不同，但它所在的Div应该始终与网页一样高。

任何人都可以提供帮助吗？

这是我到目前为止所做的：

<head>
    <style type='text/css'>
        .wrapper{
           position: relative;
           float: left;
           left: 0%;
           width: 100%;
           background-color: #cccccc
        }
        .left1{
           position: relative;
           float: left;
           left: 0;
           width: 332px;
           background-color: #ffffcc
        }
        .left2{
           position: relative;
           float: left;
           left: 0.00%;
           width: 48px;
           background-color: #ccffcc
        }
        .PaneText {
            -webkit-transform: rotate(90deg);
            white-space: no-wrap;
        }

        body {
           border-width: 0px;
           padding: 0px;
           margin: 0px;
           font-size: 90%;
           background-color: #e7e7de
        }
    </style>
</head>
<body>

    <div class="wrapper">
        <div class="left1">
            left1
        </div>
        <div class="left2">
            <div>
            <img src="http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/beer.png" height="48px" width="48px">
        </div>
        <div>
        <p class="PaneText">My Team's Requests / Managed by my direct reports / Processes Completed / Processes Completed / Processes Completed / Processes Completed</p>
        </div>
        </div>
    </div>
</body>

我意识到很多造型都是多余的。只是看不出我做错了什么。

Answer 1

代码似乎与您提供的模型的结构不同，但是，我已经修改了一些代码以适应模型，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <style type='text/css'>
      html,
      body,
      .wrapper,
      .left1,
      .left2,
      .left3 {height: 100%}

      .wrapper {background-color: #cccccc; overflow: hidden}
      .left1 {float: left; width: 332px; background-color: #ffffcc}
      .left2 {float: left; width: 48px; background-color: #ccffcc}
      .left3 {float: left}
      .PaneText {transform: rotate(90deg); white-space: nowrap}
      body {margin: 0px; font-size: 90%; background-color: #e7e7de}
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="left1">
        left1
      </div>
      <div class="left2">
        <p class="PaneText">My Team's Requests / Managed by my direct reports / Processes Completed / Processes Completed / Processes Completed / Processes Completed</p>
      </div>
      <div class="left3">
        <img src="http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/beer.png" height="48px" width="48px">
      </div>
    </div>
  </body>
</html>

正如您在上面的代码中所注意到的，要拥有完整的文档高度，您必须将每个父div设置为100％高度（包括一直到＆lt; html＆gt;元素）。

您还有一些HTML错误，可能会妨碍您的努力。

Answer 2

你的css中有一些错误，看看这个WORKING DEMO

white-space: no-wrap; white-space: nowrap;也应该是{{1}}，这就是你的文字破裂的原因。

垂直文本自动拉伸Div

2 个答案: