与动态宽度在一起的两个div

我正在尝试使用搜索输入和用户的名称相邻。由于用户名称可能很长，搜索输入必须改变其宽度（以及用户名div）。像下面的图片：与动态宽度在一起的两个div

dynamic width

<div class="container"> 
    <div class="left" style="width: 80%">DYNAMIC WIDTH - search input</div> 
    <div class="right" style="width: 20%">SHORT NAME</div> 
</div>

codepen是here。

我在那里手动设置宽度（80％和20％，或70％和30％），我希望它根据名称的长度动态更改，并且div必须总和100％。

它看起来很简单，但我想不出一个办法。感谢您的帮助！

来源

2014-09-05 Lucas Garcia

我不明白你想实现什么，不是很清楚了吗？ – Haris 2014-09-05 17:44:14

也许你想要的是样式'display：inline-block'？ – Kyojimaru 2014-09-05 17:45:12

对不起，哈利，我会编辑更清晰的问题。但是，正如你所看到的，我在那里手动设置宽度（80％和20％），我希望它根据名称的长度动态变化 – 2014-09-05 17:45:14

很容易将它们设置为display: table-cell元素，因为细胞调整宽度以适应父。

如果设置left div来width: 100%它总是会留下的剩余空间被right格：

http://jsfiddle.net/fzmj5q2r/

.container { 
    display: table; 
    width: 100%; 
} 

.left { 
    display: table-cell; 
    width: 100%; 
    background: red; 
} 

.right { 
    display: table-cell; 
    background: green; 
    white-space: nowrap; 
}

来源

2014-09-05 18:01:12 LcSalazar

这就是我一直在寻找的，谢谢！ – 2014-09-05 18:17:38

如果文本在左边部分太长，有没有办法使用省略号？ – 2016-08-08 21:53:24

您是否尝试将边距设置为自动？像这样：

<div style="margin-left:auto; margin-right: auto;">Sample Text</div>

来源

2014-09-05 17:46:49 killQuotes

It没有工作...两个div在一起（名称和搜索输入）必须总和为100％。 – 2014-09-05 17:48:45

http://codepen.io/stephenbe/pen/KhDJw

我所做的只是有一个包裹，你输入并命名......名字是在输入文本

告诉我，如果这是一个有效的解决方案你

.name { 
    position:absolute; 
    right:0; 
    top:0; 
    height:100%; 
    background:red; 

    padding:20px; 
    vertical-align:middle; 

    box-sizing:border-box; 

}

来源

2014-09-05 18:00:38 Stephen

谢谢你的回答，斯蒂芬。但我不知道你是否意识到你的.name div已经超过了输入。因此，如果我在输入字段中放置一个长字符串，它将被红色的.name div隐藏。 – 2014-09-05 18:08:57

是的，像表格单元解决方案更好！很高兴你最终找到了你的答案:) – Stephen 2014-09-05 18:19:28

与动态宽度在一起的两个div

回答

相关问题