1

li 要素内のテキストの整形に問題があります。私が抱えている問題の 1 つは、float-right div が右上にフロートせず、上部にスペースが残ることです。また、テキストが正しく「整形」されていません。このjsfiddleからわかるように、divはグリッド線の内側にありますが、テキストは線の外側に表示されます. また、単語が収まらない場合に単語を区切るためにダッシュを配置する方法 (最後の単語で行ったように) や、テキストを小さくする方法はありますか?

不正なテキスト オーバーフローを示す jsfiddle を更新しました: http://jsfiddle.net/u773M/1/

テキストフロートdivを作成する私のphpは次のとおりです。

<?php for ($i = 1; $i < 7; $i++) {
 echo '<div class="trianglefloatleft" style="width:'.(3+($i*6)).'%;"></div>';
 echo '<div class="trianglefloatright" style="width:'.(9+($i*6)).'%;"></div>'; }
?>
4

2 に答える 2

1

これを追加すると動作します

<div class="trianglefloatleft" style="width:9%;"></div>
<div class="trianglefloatright" style="width: 9%; margin-top: -12px;"></div>

条件に応じて、幅9％のdivを1回だけ作成していることを意味します

于 2012-09-30T04:50:39.533 に答える
0

@hakra のおかげで、私は部分的にそこにたどり着きました。ただし、実際の解決策ははるかに単純で、より理にかなっています (これを実現するのになぜそんなに時間がかかったのかわかりません): float の正しい div を最初に配置してください!

気にする人のための更新されたコード: http://jsfiddle.net/u773M/4/

于 2012-09-30T22:06:09.493 に答える