1

当谈到 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 解决方案会很漂亮。

4

2 回答 2

0

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

float: left

改变了上面的小提琴，一个元素向右浮动，另一个元素向左浮动，它们将彼此并排。

于 2013-10-15T10:12:34.707 回答
0

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

max-width:170px;

然后display:block-inline也放入主要内容，这应该可以解决问题。

于 2013-10-15T09:33:54.470 回答