Question

目前我在我的网络应用程序中进行了以下设置，其中左侧是上/下投票，后面是用户输入的一些文本。

 -----   -------------------------------
|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设置为相对简单，因此无法弄清楚为什么当文本换行发生时它会一直到左侧callbox下方的中心位置。谢谢你的帮助！

.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;
}

谢谢

Answer 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;
}

（demo）

在保持对象相对于彼此完整位置的同时包裹文本

1 个答案: