2

我目前正在修改 Chris Callison-Burch 的 Amazon Mechanical Turk Word Alignment UI（https://github.com/callison-burch/mechanical_turk_workshop/wiki/word-alignment或http://cs.jhu.edu/~ccb/interface -word-alignment.html），这样它就不会将图像用于旋转的源词。我已成功旋转源（英文）单词，但无法正确对齐它们。我想让单词环绕在桌子上，所以顶部的英文单词应该与桌子的顶部对齐，而底部的英文单词应该与桌子的底部对齐。基本上，我希望它看起来像这个页面（http://cs.jhu.edu/~ccb/interface-word-alignment.html），但使用旋转文本而不是旋转图像。

你可以在这里查看代码：http: //jsfiddle.net/BqTJe/

具体来说，我正在使用以下 CSS 类旋转单词：

.rotated { 
    display: block; 
    position: relative; 
    width: 20px; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg);
}

提前感谢您的帮助！

4

1 回答 1

0

我在 www.reddit.com/r/css 上问了这个问题，这就是我得到的（感谢 www.reddit.com/u/dangoodspeed！）

首先，将以下行添加到 css：

table { border-collapse:collapse; margin:100px auto;}
td { border:2px solid white; min-width:20px; min-height:20px;}
table tr:last-child td { overflow:hidden; height:100px; max-width:20px;}
table tr:last-child td div { display:block; text-align:right; width:100px; height:20px; positon:relative; left:-40px;}

然后你用 div 而不是 span 将表格底部的文本包装起来。

您可以在此处查看固定版本：http: //jsfiddle.net/BqTJe/12/

注意：字数不能超过 100px。

于 2013-02-17T15:15:25.890 回答