Question

我需要创建以下布局：

+--------+----------------------------------+-----------+
|  fixed |  variable         | variable     |   fixed   |
|  width |   width - p2      |  width - p1  |   width   |
+--------+-------------------+--------------+-----------+

两个中间框，其宽度可变，优先级为p1＆gt; P2。这两个框中的内容永远不会产生两行文本（垂直），因为当文本对于框太宽时，p2框将使用省略号。

更多ascii艺术示例！

+--------+----------------------------------+-----------+
| <img/> | A person @ A Location     |Today |   Accept  |
+--------+----------------------------------+-----------+

+--------+----------------------------------+-----------+
| <img/> | A person @ A Location w...|Today |   Accept  |
+--------+----------------------------------+-----------+

+--------+----------------------------------+-----------+
| <img/> | A person @ A ...|Yesterday @ 3pm |   Accept  |
+--------+----------------------------------+-----------+

所以你会看到“p2”框增长（将有一个最大宽度），“p1”框缩小以适应宽度增加。

我真的希望CSS允许使用jquery-esque遍历和css选择器将维度表示为方程式！即

.style {
   width: $(this).parent.width - $('other_div).width ;
}

我完全可以在表中完成这种布局，如果它更容易完成，即每个浏览器调整需要更少/不需要。

干杯，

麦克

UPDATE 理想情况下，我希望这不需要任何javascript。

Answer 1

这只使用CSS。这些类不会被使用，只会匹配问题。

    <div class="row">
        <span class="col1">...</span>
        <span style="display: inline-block; position: relative; width: 400px;">
            <span class="col2" style="display: inline-block; width: 400px; overflow: hidden;">123456789012345678901234567890123456789012345678901234567890</span>
            <span class="col3" style="display: inline-block; position: absolute; top: 0px; right: 0px; background-color: #fff;">Higher priority text.</span>
        </span>
        <span class="col4">...</span>
    </div>

这不会调整col2的大小，但会覆盖它，所以它可能不太理想。此外，它可能需要在每一行之间。

Answer 2

这是你追求的吗？

        <script type="text/javascript">
$(document).ready(function() {
    $(".col2").each(function () {
        $(this).width($(this).parent().width() - $(this).next().width() - 10);
    });
});
        </script>
        <div class="row">
            <span class="col1">...</span>
            <span style="display: inline-block; width: 400px;">
                <span class="col2" style="display: inline-block; overflow: hidden;">123456789012345678901234567890123456789012345678901234567890</span>
                <span class="col3">Higher priority text.</span>
            </span>
            <span class="col4">...</span>
        </div>

唯一需要的课程是“col2”，我只添加其他课程以尝试匹配您的问题。我正在取消宽度的额外10个像素是处理2个中心跨度之间的空间，根据您的需要进行调整。

Answer 3

您可以使用jquery将宽度直接写入元素，如MattMS所述，或者我也建议查看less css，这是一个css处理器，允许您使用变量并直接在样式表中执行此类操作

如何构建我的HTML以优先于另一个div的特定div宽度？

3 个答案: