Question

我已经搜索过了，对我来说没有确切的解决方案。我正在尝试制作两列：

左液+右液。

左栏包含100％width的输入框，左栏width依赖于右栏width。

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

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

请看下面的图片

有什么建议吗？

Answer 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>

Answer 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>

CSS：如何使两列右流体左流体取决于右侧

2 个答案: