内容左侧的CSS3垂直文本横幅答案

【问题标题】：CSS3 Vertical text banner to left of content内容左侧的CSS3垂直文本横幅
【发布时间】：2013-10-15 09:03:11
【问题描述】：

在 CSS 方面我不是专家，我只想尽可能使用 CSS 创建网页布局。我想要的布局是有两个 div，一个包含横幅，另一个包含页面内容，横幅位于内容的左侧。到目前为止很容易。横幅 div 包含两个子 div，一个包含页面的标题，另一个包含一些额外的信息，例如联系信息。再一次，不要太难。

当我希望标题中显示的文本是垂直的，从下到上阅读时，就会出现问题。我在网上进行了一些搜索，发现 CSS3 变换旋转功能可以满足我的要求。

#name {
  border: solid 1px black;
  background-color: yellow;
  height: 50px;
  font: normal normal bold 40px Helvetica, Arial, sans-serif;
  padding: 10px;
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(270deg);
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(270deg);
  -ms-transform-origin: left bottom;
  -ms-transform: rotate(270deg);
  -o-transform-origin: left bottom;
  -o-transform: rotate(270deg);
  transform-origin: left bottom;
  transform: rotate(270deg);
}

不幸的是，在浏览器中渲染文本时，浏览器为旋转文本保留的空间是横幅文本旋转前的宽度，而不是旋转后的文本宽度（即旋转前横幅文字的高度）。因此，当我希望它位于横幅 div 旁边时，我的内容 div 就在页面上。

要了解我的意思，请查看JSFiddle。

如何让两个 div 并存？

这不一定是纯 CSS 解决方案，因为我认为我可能必须使用 JavaScript/jQuery 来计算宽度和高度等，然后相应地移动横幅 div，但纯 CSS 解决方案会很漂亮.

【问题讨论】：

您是否尝试将float: left; 添加到#name 和#info ？
你有没有试过摆弄这个位置，比如把它变成position:relative;？然后你可以通知 div 它需要与前一个元素相关的位置...

标签： javascript jquery html css vertical-text

【解决方案1】：

这是一个小提琴：http://jsfiddle.net/sijav/UDfZE/53/ 你应该这样做，为#banner 设置一个最大宽度，

max-width:170px;

然后将display:block-inline 也放在主要内容中，这样就可以了。

【讨论】：

不幸的是，#name 的长度会缩短。我希望它都在一条线上。
@MauganStevens 我无法理解你在说什么，#name 的长度没有变短吗？会更清楚你到底想要什么？
我想要的是#name 中的单行文本，不管它有多长，然后旋转以使其像最初描述的那样垂直。对不起，如果这有点不清楚。当 max-width 设置为 170px 时，包含的 div 会强制其中的文本换行。
@MauganStevens 你可以使用 white-space:nowrap;在你的#name css 中。

【解决方案2】：

http://jsfiddle.net/UDfZE/55/

float: left

改变了上面的小提琴，一个元素向右浮动，另一个元素向左浮动。

【讨论】：