1

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

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

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

我无法工作的信息图形面板是“148 TEAMS”……希望问题对 css 向导来说是显而易见的！

任何提示或提示将不胜感激，任何可以帮助我解决此问题的人都将在我启动时在网站上获得荣誉！

4

1 回答 1

0

我有一个解决方案给你，但它不是 100% 干净的。在我看来，它只是不允许使用负边距，但我找不到其他解决方案。此外，您确实定义了元素的高度和宽度......

您必须将旋转的<span>元素放入anthe <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 解决方案。

于 2013-06-07T06:54:19.230 回答