0

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

左流体+右流体。

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

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

  • A只是输入框。

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

请看下面的图片

请看下面的图片

有什么建议吗？

4

2 回答 2

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>

于 2016-08-27T09:47:21.187 回答
0

尝试这个

<!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>
于 2016-08-27T10:05:03.883 回答