Пытаюсь создать шапку. У меня есть родительский контейнер div с 3 дочерними div. Дочерний div 1 зафиксирован и будет выровнен по левому краю. Дочерний div 3 зафиксирован и будет выровнен по правому краю. Дочерний div 2 имеет переменный размер и будет соответствовать между Child 1 и Child 3. Размер дочернего элемента 2 будет изменяться в зависимости от размера браузера (он будет расширяться и сжиматься до определенной точки).

Я хочу, чтобы мой заголовок был совместим со старыми версиями IE, по крайней мере, с I.E. версия 8. Я читаю о FLEXBOX и похоже, что он даже не полностью совместим с I.E. 11 без ошибок.

Я подумываю об использовании таблицы, но мне было интересно, есть ли лучшие способы сделать это ... поскольку я кратко протестировал таблицу, и она тоже не делает то, что я хочу. Я попробовал, и хотя я указал ширину для каждого элемента, когда я сжимаю свой браузер, дочерний элемент 1 и дочерний элемент 3 изменяются в размере - НЕ то, что я хочу.

Благодарность!

0
confused 22 Дек 2016 в 23:02
Вы должны иметь возможность добавить margin: 0 auto к Child 2, при этом Child 1 и Child 3 перемещаются влево и вправо соответственно.
 – 
JDavis
22 Дек 2016 в 23:06
Хм ... я попробую, спасибо!
 – 
confused
22 Дек 2016 в 23:13
На самом деле, я не думаю, что это сработает. Дочерний элемент 2 будет пытаться занять всю ширину контейнера и подтолкнуть ребенка 3 вниз.
 – 
JDavis
22 Дек 2016 в 23:14

4 ответа

В IE8 вы можете рассматривать таблицы, но старый способ сделать это - использовать числа с плавающей запятой.

#wrapper {
  overflow: hidden; /* Establish BFC */
}
#child1 {
  float: left;
  width: 200px;
  background: yellow;
}
#child3 {
  float: right;
  width: 150px;
  background: pink;
}
#child2 {
  overflow: hidden; /* Establish BFC */
  background: cyan;
}
<div id="wrapper">
  <div id="child1">Child 1</div>
  <div id="child3">Child 3</div>
  <div id="child2">Child 2</div>
</div>

Чтобы применить одну строку, вы можете добавить набор max-width процентов к #child1 и #child2, которые в сумме дают 100%.

2
Oriol 22 Дек 2016 в 23:38
Хм .. это тоже отлично работает. позвольте мне попробовать это с моим кодом и посмотреть, работает ли он. Сейчас я использую float. Что означает «Установить BFC» в ваших комментариях?
 – 
confused
22 Дек 2016 в 23:41
 – 
G-Cyrillus
22 Дек 2016 в 23:43
Корни контекста форматирования блока не перекрывают плавающие объекты и включают в себя плавающих потомков. См. Плавающие элементы внутри div, плавают вне div. Почему?
 – 
Oriol
22 Дек 2016 в 23:56

Я не совсем понимаю проблему, с которой вы столкнулись при попытке использовать таблицы. Не могли бы вы объяснить, в чем была проблема?

Вы можете попробовать использовать div и CSS для создания отображения в виде таблицы. Таким образом, вы можете, например, использовать запросы функций, чтобы узнать, доступен ли flexbox, и использовать его. Если нет, вы можете вернуться к использованию таблицы CSS ниже. И все это без изменения HTML.

Сообщите мне, работает ли это для вас!

#container{
  display: table;

  /* use table-layout: fixed if you're 
     having problems with the content expanding 
     the fixed cells */
  /* table-layout: fixed; */

  width: 100%; /* or however big you need it */
}

  #row{
    display: table-row;
  }

    #one,
    #two,
    #three{
      display: table-cell;
    }

  #one{
    width: 100px;
    background: blue;
  }
  #two{
    width: auto;
    background: red;
  }
  #three{
    width: 100px;
    background: orange;
  }
<div id="container">
  <div id="row">
    <div id="one">Div 1</div>
    <div id="two">Div 2</div>
    <div id="three">Div 3</div>
  </div>
</div>
2
heraldo 22 Дек 2016 в 23:41
Хорошо, когда я запустил ваш код, он выглядел великолепно. Я попробую еще раз, я только что удалил свои таблицы, лол.
 – 
confused
22 Дек 2016 в 23:29
Мой дочерний элемент 1 на самом деле представляет собой 1 большой div с большим количеством дочерних div внутри него (все с фиксированной шириной), поэтому, когда я попытался изменить размер своего браузера, он поместил один из этих дочерних div в строку ниже.
 – 
confused
22 Дек 2016 в 23:30
Не могли бы вы поместить свой код в jsfiddle? Может возникнуть пара проблем, но наличие фактического кода сделает это намного проще. Например, вы скопировали мой CSS? #row div вызовет проблемы, поскольку это свободный селектор, и он выберет все дочерние div. Это было просто для примера. Он должен быть нацелен только на 3 блока.
 – 
heraldo
22 Дек 2016 в 23:34
Я как раз собирался спросить, что означает div #row, ха-ха, я сейчас над этим работаю. не уверен, что такое jsfiddle, но я посмотрю на него
 – 
confused
22 Дек 2016 в 23:39
@ user145190, я отредактировал свой ответ так, чтобы он был нацелен только на три div. Я также добавил необязательное правило table-layout: fixed. Это решит проблему дочернего контента, расширяющего фиксированные div. Таким образом, они останутся на уровне 100 пикселей, несмотря ни на что.
 – 
heraldo
22 Дек 2016 в 23:42

Ну, flexbox был создан специально, чтобы предоставить CSS способ делать то, что вы описываете, так что это немного похоже на вопрос, как найти площадь квадрата без умножения ...

До использования flexbox моим основным решением для такого рода проблем было использование JavaScript для динамического изменения размера соответствующего div (второго дочернего элемента в вашем случае). Мне действительно не нравилось это решение даже тогда, потому что я не думаю, что JavaScript - хорошее место для логики макета, но это было лучшее, что я мог придумать.

Я полагаю, вы могли бы использовать таблицу, но я думаю, что тогда вы столкнетесь с причудливыми ограничениями в компоновке внутри «ячеек».

0
Mark Adelsberger 22 Дек 2016 в 23:07
Так что я должен просто создать что-то, что не сжимается и не изменяет размер, если я хочу, чтобы оно было совместимо со старыми версиями IE?
 – 
confused
22 Дек 2016 в 23:10
Я не могу сказать, что вам следует делать. Как я уже сказал, лучшее, что я когда-либо придумал, - это JavaScript; Мне это не понравилось, но я использовал. Комментарии к вопросу предполагают, что для этого конкретного случая (горизонтальный макет с 3 частями, где средняя - это та, размер которой изменяется) можно заставить работать, перемещая первую и третью; это тоже стоит попробовать.
 – 
Mark Adelsberger
22 Дек 2016 в 23:14

Вот одно решение, но оно имеет ограничения. Вы должны знать ширину дочернего элемента 3 и позиционировать родительский div относительно.

https://jsfiddle.net/whatisthebigpicture/sj9xv9m6/1/

header {
  position: relative;
}
div {
  outline: 1px solid red;
}
.div1 {
  width: 100px;
  float: left;
}
.div2 {
  margin-right: 100px;
}
.div3 {
  width: 100px;
  top: 0;
  right: 0;
  position: absolute;
}
0
JDavis 23 Дек 2016 в 03:08