2

Пытаюсь сделать два <div> блока внутри <div> ширина которого 400px. Надо чтобы ширина вложенного дива была 30px, а всю оставшуюся ширину заполнил первый <div>.

Делаю так:

.insert {
  /*height: 36px;*/
  padding: 9px 10px 9px 10px;
  border: 0 none;
  background: #ebebeb none repeat scroll 0 0;
}

.filed_input {
  width: 400px;
  background: #ebebeb none repeat scroll 0 0;
}

.arrow_label {
  width: 30px;
  height: 34px;
}

.arrow_label:before {
  content: '▼';
  top: 7px;
  left: 8px;
  position: relative;
}

.arrow_label.on:before {
  content: '▲';
}

.container_field_input {
  overflow: hidden;
}

.filed_input div {
  display: inline-block;
}

.filed_input>* {
  vertical-align: top;
}

._input {
  width: 100%;
}
<div class="filed_input">
  <div class="_input">
    <input type="text" class="insert" />
  </div>
  <div class="arrow_label" id="_arraw_label"></div>
</div>
<div class="filed_list"></div>

Но почему-то первый занимает все 100% и второй уходит на вторую строку.
Flex, grid не нужны.


Вот итоговый, работающий под мою задачу код:anon/pen/qLwmZQ

4
  • Не даёт вставить, потому что код должен быть прямо в тексте вопроса без всяких там кодепенов. Доведите оформление вопроса до ума
    – andreymal
    16 янв 2019 в 11:41
  • html & css можно увидеть?
    – Keeplod
    16 янв 2019 в 11:42
  • codepen.io/anon/pen/WLWbvq 16 янв 2019 в 12:11
  • Вставляю код и такая чушь выходит, не знаю почему 16 янв 2019 в 12:15

3 ответа 3

2

Если без современных возможностей css (flex, grid) и если я правильно понимаю задачу, то обертке задаем position:relative и отступ равный ширине стрелочки. А самой стрелочке задаем position:absolute и выравниваем по вертикали:

.insert {
  /*height: 36px;*/
  padding: 9px 10px 9px 10px;
  border: 0 none;
  background: #ebebeb none repeat scroll 0 0;
}

.filed_input {
  width: 400px;
  background: #ebebeb none repeat scroll 0 0;
  position: relative;
  padding-right: 30px;
}

.arrow_label {
  width: 30px;
  height: 34px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -17px;
}

.arrow_label:before {
  content: '▼';
  top: 7px;
  left: 8px;
  position: relative;
}

.arrow_label.on:before {
  content: '▲';
}

.container_field_input {
  overflow: hidden;
}

.filed_input div {
  display: inline-block;
}

.filed_input>* {
  vertical-align: top;
}

._input {
  width: 100%;
}
<div class="filed_input">
  <div class="_input">
    <input type="text" class="insert" />
  </div>
  <div class="arrow_label" id="_arraw_label"></div>
</div>
<div class="filed_list"></div>

Еще вариант с display: table:

.insert {
  /*height: 36px;*/
  padding: 9px 10px 9px 10px;
  border: 0 none;
  background: #ebebeb none repeat scroll 0 0;
  
  width: 100%;
}

.filed_input {
  width: 400px;
  background: #ebebeb none repeat scroll 0 0;
  
  display: table;
  table-layout: fixed;
}

.arrow_label {
  width: 30px;
  height: 34px;
  
  display: table-cell;
  vertical-align: middle;
  
}

.arrow_label:before {
  content: '▼';
  top: 7px;
  left: 8px;
  position: relative;
}

.arrow_label.on:before {
  content: '▲';
}

.container_field_input {
  overflow: hidden;
}

/* .filed_input div {
  display: inline-block;
} */

.filed_input>* {
  vertical-align: top;
}

._input {
  /* width: 100%; */
  
  display: table-cell;
  vertical-align: middle;
}
<div class="filed_input">
  <div class="_input">
    <input type="text" class="insert" />
  </div>
  <div class="arrow_label" id="_arraw_label"></div>
</div>
<div class="filed_list"></div>

1

Если не так Кодик тогда нарисуй мне как ты хочешь)

<div class="filed_input">
<div class="_input">
  <div class="arrow_label" id="_arraw_label"></div>
    <input type="text" class="insert"     onclick="toggleDrop(ge('_arraw_label'));"/>
</div>

5
  • Сначала строка должна идти, а уже потом стрелочка вниз. Я ведь дал структуру HTML 16 янв 2019 в 14:07
  • В общем сделал через обтекание и почему то работает, кто-нибудь знает почему? То есть если я ставлю кнопку сначала и даю обтекать ее справа-то все работает. как я хочу. Что за магия? Код-codepen.io/anon/pen/BvEWba 16 янв 2019 в 15:51
  • ты поставил float: right; - Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
    – Keeplod
    17 янв 2019 в 4:08
  • 1
    А если делаю через левое обтекание-то так не получается почему-то 17 янв 2019 в 10:08
  • вот только что к тебе зашел поменял right на left и поменялось как надо кнопка слева строчка справа
    – Keeplod
    17 янв 2019 в 12:57
0

На сколько я понял тебе нужно в диван(1) уместить диван(2) который 30px и диван(3) причем 3ий диван нужно чтобы занимал все пространство кроме того что занимает 2ой внутри 1го

Так сделай 2ой диван внутри 3го.

3
  • Место того что бы минусы ставить объясни что нужно...
    – Keeplod
    16 янв 2019 в 11:53
  • я не минусил ответ 16 янв 2019 в 12:11
  • Лудушки) так я правильно понял суть вопроса?
    – Keeplod
    16 янв 2019 в 12:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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