2

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

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

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

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

4
  • отследить ширину никак нельзя. Если вы хотите в 1 строку текст и инпут рядом, то советую использовать флексбокс Commented 17 мар. 2017 в 15:09
  • да, мне нужно именно так как вы описали. текст в строку и инпут рядом и все это в div 100%.
    – WhoIsDT
    Commented 17 мар. 2017 в 15:11
  • Если вам нужно рядом, то смотрите это: css-tricks.com/snippets/css/a-guide-to-flexbox
    – Yuri
    Commented 17 мар. 2017 в 15:16
  • 3
    jsfiddle.net/soledar10/nbh47Lpt
    – soledar10
    Commented 17 мар. 2017 в 15:21

3 ответа 3

2

.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;

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>

0

Можно использовать 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.