0

現在、Webアプリで次の設定を行っています。左側には賛成/反対の投票があり、その後にユーザーが入力するテキストが続きます。 

 -----   -------------------------------
|up   | |some one liner text            |
|down |  -------------------------------
|vote | 
 -----

テキストが長くなりすぎると、折り返されますが、次のように、上下投票システムに対する相対的な位置が完全に揺らいでしまいます。

//current undesired outcome
 -----   
|up   | 
|down |  
|vote |  -------------------------------
 -----  |some longer text goes here, it |
        |also magically centers if it   |
        |      goes several lines       |
         -------------------------------

CSSを比較的単純に設定したので、テキストの折り返しが発生すると、左側のコールボックスの下の中央に表示される理由がわかりませんでした。ご協力いただきありがとうございます！

.parent-div {
    overflow: hidden;
}

.votebox {
    float: left;
    width:40px; 
    height:50px;
    //there are more sub classes in here for the up/down vote arrows but I didn't include
}

.usertext{
    float:left;
    margin-left:10px;
}

ありがとう

4

1 に答える 1

1

私が正しく理解している場合、マークアップは次のようになります。

<div class="left">
  up down vote
</div>

<div class="right">
  text...
</div>

overflow:hiddenもしそうなら、ちょうど正しいDIVを置きます：

.left{
    float:left;
    margin-right: 10px;
}

.right{
    overflow:hidden;
}

（デモ）

于 2013-01-29T20:42:28.570 に答える