1

我需要列表中的项目为这种格式：

|Name                               |    Some other val1|
|Very very long no wrap line that...|    Some other val2|
  • 右侧是固定宽度。
  • 左侧必须填充到右侧窗格的所有可用宽度。
  • 必须对屏幕大小调整做出反应（它是一个移动网站，所以方向真的会改变）
  • 左窗格上的文本行不能换行，需要使用省略号（文本溢出：省略号）将其截断。

换一种方式：

|<--灵活，多行，但不换行（使用省略号）-->|<--固定宽度-->|

我尝试了各种浮动：左和右，溢出：隐藏，以及没有运气的带有边距的棘手东西！我应该只用一张桌子吗？

4

3 回答 3

1

您可以结合使用display:inline-blockwithvertical-align:top和删除元素之间的空格-请注意 HTML 注释（有关更多信息，请参阅此答案）并使用CSS calc()。

HTML：

<div class="parent">
    <div class="left">
        <p>Curabitur tristique, purus a dapibus laoreet, tellus massa tempor turpis, eget tristique turpis lorem vitae nulla. Morbi venenatis, mi vel sodales sollicitudin, quam mauris vulputate nibh, sed convallis arcu nisi sed sem. Suspendisse potenti. Cras lobortis porttitor libero, et commodo risus commodo sit amet. Etiam vitae justo ac est aliquet pharetra. Integer eu auctor mi, a molestie lacus. Morbi vel diam ut sem rutrum eleifend vel quis sapien. Phasellus vel faucibus eros, in commodo neque.</p>
    </div><!--
    --><div class="right">
    </div>
</div>

CSS：

html,body,.parent{
    width:100%;
    height:100%;
}

.right{
    height:100%;
    width:100px;
    background:red;
    display:inline-block;
    vertical-align:top;
}

.left{
    width:calc(100% - 100px);
    height:100%;
    background:blue;
    display:inline-block;
    vertical-align:top;
}

p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

JSFiddle

可以使用 calc()

注意：我使用Eric Meyer 的“Reset CSS”2.0

于 2013-09-06T23:12:52.527 回答
0

我过去曾试图完成同样的事情。

最后，我最终使用了 table，它并没有你想象的那么糟糕。

在那之前我很怕桌子，但现在我很舒服地在必要时使用桌子。

除非您愿意使用 javascript，否则在这种情况下使用 table 是唯一的方法。

不要害怕使用桌子。

于 2013-09-05T21:05:10.100 回答
0

text-overflow: ellipsis在左侧窗格中使用

例子：

<ul>
    <li>
        <div class="right">RIGHT VALUE</div>
        <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at mi faucibus, fringilla purus non, blandit nibh. Cras non volutpat augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque varius eu leo quis molestie. Sed scelerisque nisl a felis interdum, nec gravida odio condimentum. Integer tellus leo, luctus vitae gravida et, ultrices quis justo. Etiam id dignissim diam. Suspendisse mattis nec odio sit amet adipiscing. Nullam nec ornare massa. Fusce gravida enim eget tellus lobortis cursus. Curabitur venenatis dignissim nisi ut auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
    </li>
</ul>

css

ul li .left {
    margin-right: 100px;
    height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
ul li .right {
    float: right;
    width: 100px;
    background-color: #ccc;
}

http://jsfiddle.net/HMB8c/

于 2013-09-05T21:09:11.800 回答