Question

在CSS方面我不是大师，我想尽可能使用CSS创建网页布局。我想要的布局是有两个div，一个包含横幅，另一个包含页面内容，内容左侧有横幅。到目前为止很容易。 banner 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解决方案会很漂亮

Answer 1

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

max-width:170px;

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

Answer 2

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

float: left

将上面的小提琴改为右移，左边的另一个元素将它们并排放置。

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

2 个答案: