javascript - 如何动态定义 HTML 元素的宽度

Question

我有一个包含两个子 div 的容器 div。容器 div 的宽度为 100%。子 div 处于 float 状态。左侧 div 的宽度未设置，因为它的内容必须决定它的宽度。右侧 div 的宽度必须是 100% 减去左侧 div 的宽度。

HTML:

<div class="container">
    <div class="message-name"><p>User :</p></div>
    <div class="message-msg"><p>Some message</p></div>
</div>
<div class="container">
    <div class="message-name"><p>User : </p></div>
    <div class="message-msg"><p>Some really long message that breaks to new line because it is too long to stay on this line. mmmm mmmmmmmmmmmmm mmmmmmmmmmmmm mmmmmmmmmmm mmmmmmmmmm mmmmmmmmm mmmmmmmmm mmmmmmmmmm mmmmmmmmmm mmmmmmmmm mmmmmmmm</p></div>
</div>

CSS:

*{margin:0;pading:0;}

.container{
    width:100%;
    min-height: 20px;
    overflow: auto;
}
.message-name{
    height: 20px;
    text-align: left;
    float: left;
    border: 1px solid red;
}
.message-msg{
    border: 1px solid red;
    min-height: 20px;
    float: left;
}

这是我尝试在动态添加到页面时使用 JQuery 动态设置右侧 div 的宽度:

$(document).ready( function(){

    var nameWidth = $(".message-name").last().width();

    alert(nameWidth);

    $(".message-msg").last().css("width","100%").width($(".message-msg").last() - nameWidth);

});

但这并没有改变任何东西。

如何获取左侧 div 的宽度，然后从右侧 div 的宽度中减去该宽度，以确保右侧 div 不会换行？

这是一个JSFiddle我的尝试。

Answer 1

使用flexbox，就是support is wide enough出于最合理的目的。

无需脚本，更加灵活!

* {
    margin:0;
    padding:0;
}

.container {
    width:100%;
    min-height: 20px;
    overflow: auto;
    display: flex;
    flex-direction: row;
}
.message-name {
    height: 20px;
    text-align: left;
    border: 1px solid red;
    flex-shrink: 0;
}
.message-msg {
    border: 1px solid red;
    min-height: 20px;
    flex-grow: 1;
    flex-shrink: 1;
}

<div class="container">
    <div class="message-name"><p>User :</p></div>
    <div class="message-msg"><p>Some message</p></div>
</div>
<div class="container">
    <div class="message-name"><p>User : </p></div>
    <div class="message-msg"><p>Some really long message that breaks to new line because it is too long to stay on this line. mmmm mmmmmmmmmmmmm mmmmmmmmmmmmm mmmmmmmmmmm mmmmmmmmmm mmmmmmmmm mmmmmmmmm mmmmmmmmmm mmmmmmmmmm mmmmmmmmm mmmmmmmm</p></div>
</div>

也在 JSFiddle 上