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 で囲みます。

ここで修正バージョンを確認できます: http://jsfiddle.net/BqTJe/12/

注: 単語は 100px より長くすることはできません。

于 2013-02-17T15:15:25.890 に答える