CSS：如何使两列右流体左流体依赖于右答案

【问题标题】：CSS : How to make two column right fluid left fluid depend on rightCSS：如何使两列右流体左流体依赖于右
【发布时间】：2016-08-27 09:43:58
【问题描述】：

我已经搜索过了，但没有适合我的完全解决方案。我正在尝试制作两列：

左流体 + 右流体。

左列是包含 100% width 的输入框，左列 width 依赖于右列 width。

B 只是一个文本 div，但我不知道文本的长度。它是动态长度。
A只是输入框。

因此，如果 B 是较长的文本，则 A 应该更短。

请看下图

有什么建议吗？

【问题讨论】：

非常感谢和抱歉：D

标签： html css fluid-layout fluid-dynamics

【解决方案1】：

您可以使用Flexbox 并在输入时设置flex: 1。

.el {
  display: flex;
}
input {
  flex: 1;
  background: #A3FF9A;
}
p {
  background: #FF87DE;
  margin: 0;
}

<div class="el">
  <input type="text">
  <p>Lorem ipsum dolor.</p>
</div>

【讨论】：

@pors 不要说谢谢，请考虑投票并接受答案

【解决方案2】：

试试这个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Site name</title>
    </head>
<style>
        #container{
         width: 900px;
    }
    #container:after{clear: both; display: table; content: "";}
    #container:before{ display: table; content: "";}
    .left-column{
        width: 400px;
        float: left;
        padding: 5px; 
        background: green;
        box-sizing: border-box;
    }
    .left-column input{width: 100%;}
    .right-column{
        float: right;
        padding: 5px;
        width: 500px;
        background: violet;
        box-sizing: border-box;
    }
</style>
<body>
   <div id="container"> 
       <div class="left-column">
           <input name="f-name" type="text"></input>
       </div>
       <div class="right-column">
           Lorem ipsum dolor sit amet, consectetur 
           adipiscing elit, sed do eiusmod tempor 
           incididunt ut labore et dolore magna aliqua. 
           Ut enim ad minim veniam, quis nostrud 
           exercitation ullamco laboris nisi ut 
           aliquip ex ea commodo consequat. Duis 
           aute irure dolor in reprehenderit in 
           voluptate velit esse cillum dolore eu 
           fugiat nulla pariatur. Excepteur sint 
           occaecat cupidatat non proident, sunt 
           in culpa qui officia deserunt mollit 
           anim id est laborum.
       </div>
   </div>
</body>
</html>

【讨论】：