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：如何使兩列右流體左流體取決於右

回答

相關問題