javascript - 两个 DIVS，一个流体，一个固定，无论高度如何，固定 div 内部都有垂直居中的元素

Question

这是我所了解到的。到目前为止，无论高度如何，我都无法将图标垂直居中在右侧 DIV 中。我也无法让左侧 DIV 中的文本在达到最大长度时中断。

这是我所拥有的:http://jsfiddle.net/SpSjL/1685/

两个框应保持相同的高度，如果左侧有几行文本，右侧也应调整

预期:

HTML:

  <div class="container">

    <div class="right">
        <div class="someIcon"></div>
    </div> 
    <div class="left">
aaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbcccdcccccccccccccccccccccccccccccdccccccccddccccc
    </div>

</div>

CSS:

    .left {
    overflow: hidden;

    border: 1px solid #FF0000;
    /* word-wrap: break-word;
    word-break: break-all;
    text-wrap: normal; 
    white-space: normal;*/
    word-break: break-all;
}

.container {
    display: block;
    position: relative;
    overflow: hidden;
}

.someIcon {
    background: url(http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png);
    background-size: 20px;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    position: absolute;
    top: 50%:
}

.right {
    float: right;
    width: 50px;
    min-height: 50px;
    border: 1px solid #000000;
    display:table-cell; 
    vertical-align:middle;
}

Answer 1

我通过使用背景属性位置属性来简化布局，使其保持垂直居中且位于右侧。你不应该需要做任何 float 。我尝试让布局尽可能简单。

CSS

.container {
    border:1px solid black;
    background: url(http://www.adiumxtras.com/images/thumbs/adiumtwit_twitters_icon_for_adium_1_31971_7892_thumb.png) center right 15px no-repeat;
    position: relative;
    margin: 5px;
    padding: 15px 75px 15px 15px;
}

从CSS: How do I wrap text with no whitespace inside a <td>?中提取的wrapword类

.wrapword{
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}

HTML

<div class="container wrapword">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

<div class="container wrapword">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet facilisis tellus. Aliquam eu mi in augue faucibus egestas sed convallis lorem. Nulla rutrum purus ac dolor dictum viverra.
</div>

<div class="container wrapword">
    a short sentence
</div>

更新:删除了不必要的 div，支持一个很长的单词(尽管我认为这没有必要) http://jsfiddle.net/SpSjL/1708/

您可以调整背景和容器的内边距以适合您的图像。