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 вместо того, чтобы сказать спасибо, пожалуйста, рассмотреть upvote и принять ответ – 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: Как сделать две колонки правой жидкости, текущая жидкость зависит от правильного

ответ

Смежные вопросы