Question

我正在尝试在我正在处理的业余爱好网站上创建信息图形/数据面板。我希望显示一个垂直旋转的统计数据的文本，其中支持文本环绕这个但是我很难正确对齐。

我可以在以下位置显示正在进行的工作页面，而不是粘贴代码。

http://www.footy-results.co.uk/

我无法工作的信息图形面板是'148 TEAMS'...希望这个问题对css巫师很明显！

任何提示或提示都将非常感谢，任何可以帮助我解决此问题的人都会在我发布时在网站上记入！

Answer 1

我有一个解决方案，但它不是100％清洁。在我看来，它不允许使用负边距，但我找不到另一种解决方案。此外，您还要确定元素的高度和宽度......

您必须将已转换的<span>元素放入另一个<div>。然后，您可以正确定位<div>，文本会浮动在其周围。代码如下：

HTML：

<div class="infoPanel">
    <span class="infoPanelVertical">
         <div class="spanwrapper">
             <span class="infoNumberVertical">148 TEAMS</span>
         </div> your text here...
    </span>
</div>

CSS：

.spanwrapper {
    float: left;
    height: 157px;
    position: relative;
    width: 48px;
}

.infoNumberVertical {
    background-color: #F5F5F5;
    border: 1px dotted #DDDDDD;
    color: #1A3C7B;
    float: left;
    font-size: 32px;
    font-weight: bold;
    margin-left: -56px;
    margin-top: 60px;
    transform: rotate(-90deg);
    width: 150px;
}

问题是你必须为包裹<div>或其中的跨度赋予高度和宽度，否则文本不知道它应该浮动的位置。如果没有定义任何宽度或高度，文本只是环绕旋转的文本，这是一个大矩形。我使用CMS或想要动态填写内容这是一个糟糕的解决方案。但是你也可以通过js来定义宽度和高度，但我认为这有点像hacky解决方案。

将文本环绕旋转文本时出现问题

1 个答案: