我该如何构造我的HTML以使特定的div宽度优先于另一个div?

    <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的大小,但会将其覆盖,因此可能并不理想。另外,它可能需要在每行之间设置一个。

如MattMS所述,您可以使用jquery将宽度直接写入元素,或者我也建议您 less css ,一个css处理器,允许您直接在样式表中使用变量和执行类似的操作。

        <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个像素,我去掉的宽度是为了处理两个中心跨度之间的空间,调整你认为合适。