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

我已经搜索，并没有完全解决我的问题。我试图制作两列：CSS：如何使两列右流体左流体取决于右

左流体+右流体。

左列是含有以100％width和左列width输入框取决于右栏width。

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

所以如果B是更长的文本，A应该更短。

请大家看看下面的图片

什么建议吗？

来源

2016-08-27 pors

感谢和遗憾：d – pors

您可以使用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-27 09:47:21

@pors，而不是说谢谢，请考虑一个给予好评，并接受答案 – kumkanillam

你这么多试试这个

<!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-27 10:05:03

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

回答

相关问题