Каким образом можно спозиционировать блоки?

Question

[webrapist]

Привет.

Есть три блока. Один - основной и два внутри него.
Не получается расположить два внутренних блока рядом друг с другом в основном. Как это можно сделать?

Если увеличить ширину основного блока, а внутренние сделать inline-block то всё работает, но не совсем так, как нужно. Да и размеры трогать не хочется.

В общем, как это можно решить?

Бордеры не нужны, чисто для наглядности.

https://jsfiddle.net/xuhv9bu3/

Answer 1

[Roman]

Вот такого не нужно:

* {
  box-sizing: border-box;
}

Можно вспомнить классические float'ы и сделать на них (ширину в процентах, либо фиксированную у картинки и смещение или overflow у дескрипшена). Либо сделать костыль с font-size: 0; для контейнера, потому что между inline и inline-block элементами возникает расстояние, равное, примерно, ширине одного пробела, ЕМНИП.

Comments

[webrapist]

Сделал через float и смещение, правда, вроде бы пару пикселей "потерял". Думал, что можно как-то нормально сделать.

А что на счёт * {box-sizing: border-box;} ? Почему нет?

[Александр]

P.S. Только не забыть дочерним контейнерам поставить соответствующий font-size. И согласен на 100
%: * { box-sizing: border-box; } - это беда!

[webrapist]

Александр: по-че-му? Что с этим не так?

[Александр]

swibong: У вас все элементы на странице становятся со свойством box-sizing: border-box. Поддерживать это потом нереально, т.к. данное свойство 'наваривается' по-умолчанию. Лучше привязыватся к конкретным классам и не использовать звездочку.

[webrapist]

Александр: понял, спасибо.

[Сергей delphinpro]

Александр: Да бросьте вы! Это блочная модель гораздо удобнее той, что по умолчанию.
Также хочу обратить ваше внимание, что подобный трюк вполне себе успешно используется во многих CSS-фреймворках. Из самых известных это - bootstrap и materialize.

[Roman]

swibong: проблема производительности с универсальным селектором на самом деле есть, на больших страницах; такой css reset "для бедных" сразу придает запашок коду; по поводу box-sizing уже заметили выше, он нужен очень и очень редко.

[Александр]

Сергей: Я не отрицаю использование универсального селектора. Я говорю о том, что глобальное его использование неудобно потом в поддержке. Наиболее эффективно, по-моему, использовать универсальный селектор в контексте вложенных и дочерних селекторов; например так:

form * {
font-family: "Comic Sans MS";
}

form > * {
color: red;
}

P.S. В бутстрапе данный подход (box-sizing: border-box) используется, согласен. Значит у разработчиков были причины на это. Я акцентирую внимание на том, что нецелесообразно использовать универсальный селектор повсеместно, особонно для редких свойств. Представьте, что будет если разработчик сделает все элементы интайновые и еще добавит, например, !important.

[Сергей delphinpro]

Александр: Не надо крайностей. Речь идет о глобальном переключении блоковой модели. Я вообще считаю ошибкой стандарта тот факт, что по умолчанию принята модель content-box

[Сергей delphinpro]

Роман: ага, редко. В процентах 90 случаев значительно упрощает раскладку страницы...

[Сергей delphinpro]

Хотя, если вы до сих поддерживаете IE7, то да, border-box вам противопоказан.

Answer 2

[Сергей delphinpro]

https://jsfiddle.net/DelphinPRO/xuhv9bu3/1/

Comments

[webrapist]

Спасибо, работает, надо будет почитать, что такое flex и как используется.

Answer 3

[Sergey Semenov]

Вот так, подойдет?

.box1 {
  width: 650px;
  height: 316px;
  margin: 50px auto;
  border: 1px solid black;
}

.image, .description {
  height: 100%; 
}

.image {
  width: 50%;
  border: 1px solid blue;
  float:left;
}

.description {
  width: 50%;
  border: 1px solid orange;
  float:right;
}

Comments

[webrapist]

Один блок под другим вышло.

[Sergey Semenov]

Странно. Проверил еще раз, работает.