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

当谈到CSS时，我不是大师，我只想在可能的情况下使用CSS创建网页布局。我想要的布局是有两个div，一个包含横幅，另一个包含内容左侧横幅的页面内容。很简单。 banner div包含两个子div，一个包含页面的标题，另一个包含一些额外的信息，如联系信息。再一次，不要太难。CSS3在内容左侧的垂直文本横幅

当我希望标题中显示的文本是垂直的，从下到上阅读时出现问题。我在网上做了一些搜索，发现了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解决方案应该是俏皮。

来源

2013-10-15 Maugan Stevens

你有没有试过把'float：left;'添加到'＃name'和'＃info'？ – LorDex

你有没有试过摆弄这个位置，比如让它位置：relative;'？那么你可以通知div它需要与之前的元素相关... – Amber

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

max-width:170px;

然后把display:block-inline主要内容过多，应该做的伎俩。

来源

2013-10-15 09:33:54 Sijav

不幸的是，'＃name'的长度会缩短。我希望它全部在一条线上。 –

@MauganStevens我不能解释和说你在说什么，#name的长度没有缩短吗？你会更清楚你究竟想要什么？ – Sijav

我想要的是#name中的一行文本，不管它多长时间，并旋转，以便它像原来描述的那样是垂直的。对不起，如果有点不清楚。当最大宽度设置为170px时，则包含的div将强制其中的文本进行换行。 –

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

float: left

改变了上述小提琴浮动一个元素右另一个左边有他们彼此旁边。

来源

2013-10-15 10:12:34 Crouch

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

回答

相关问题