Как установить ширину input в зависимости от количества свободного места

255

19 марта 2017, 03:23

Есть контейнер:

<div style="width:100%">
 <div style="float:left; margin-right:10px;">Текст разной длины</div>
 <input style="float:left;"/>
</div>

Мне необходимо установить ширину input по такой формуле: 100% - ширину левого блока - 10пикс. отступ. Так как ширина левого блока всегда разная в зависимости от текста, я не понимаю, как можно отследить ширину.

П.С. ясное дело что можно с помощью js, но меня этот вариант не устроит. Интересует решение на чистом css.

Answer 1

.divMain:after { 
  content: ''; 
  display: block; 
  clear: both; 
} 
.divA { 
  float: left; 
  width: 240px; 
  background: #000; 
  color: #fff; 
} 
.divB { 
  overflow: hidden; 
} 
.divB input { 
  width: 100%; 
 
  /* Reset CSS */ 
  box-sizing: border-box; 
  margin: 0; 
  /* End Reset CSS */ 
}

<div class="divMain"> 
  <div class="divA"> 
    Какой-то важный контент. 
  </div> 
  <div class="divB"> 
    <input type="text" placeholder=""> 
  </div> 
</div>

.divA не должен быть пустым, а если предполагается, что он может не иметь контента - дополните его свойством min-height: 1;

Answer 2

.divMain { 
  display: flex; 
} 
.divA { 
  background: #000; 
  color: #fff; 
} 
.divB { 
  flex: 1; 
} 
.divB input { 
  width: 100%; 
}

<div class="divMain"> 
  <div class="divA"> 
    Какой-то важный контент. 
  </div> 
  <div class="divB"> 
    <input type="text" placeholder=""> 
  </div> 
</div>

Answer 3

Можно использовать flex(Вводите HTML в поля ввода):

document.querySelectorAll('.row>.field') 
  .forEach(el => 
    el.addEventListener('keyup', e => e.target.parentNode.querySelector('label').innerHTML = e.target.value));

.row{ 
  display: flex; 
 
  border: 2px solid lightblue; 
  padding: 2px; 
} 
.row>label {  
  display: block; 
  flex: auto; 
  margin-right:10px; 
  white-space: nowrap; 
} 
.row>.field{     
  width: 100%;         
}

<div class="row"> 
 <label>Текст1</label> 
 <input type="text" class="field" value="Текст1" /> 
</div> 
 
<div class="row"> 
 <label>Многострочный текст<hr/> 
разной длины</label> 
 <textarea class="field">Многострочный текст<hr/> 
разной длины</textarea> 
</div>