Как сделать так, чтобы контейнер заполнил пространство, оставленное другим?

javascript html css3

69 просмотра

4 ответа

Я пытался часами, но я не могу понять это правильно (извините, я не так хорош в CSS).

Моя цель - создать контейнер, который будет отображаться по всей ширине окна.

  • Родительский контейнер имеет высоту 200 пикселей.

Этот контейнер имеет 2 дочерних элемента, которые должны быть расположены рядом друг с другом в одной строке.

  • Правый контейнер имеет фиксированную ширину (такую ​​же, как высота, поэтому 200px).
  • Ширина левого контейнера должна быть = (текущий размер окна - 200 пикселей)

Я пытался использовать Calc, как это:

width: -webkit-calc(100% - 200px);

Но это всегда дает мне ширину -100%


Оба контейнера показывают карусели изображений, но для простоты я пытаюсь заставить его работать с одним изображением.

* Подгонка правого изображения к правому контейнеру должна быть тривиальной, и мне уже удалось заставить левое изображение расширяться до ширины 100% или высоты 100% в зависимости от того, что меньше. Плюс я центрирую изображение, используя скрипт Java.

Я думал, что это можно легко сделать с помощью CSS, но, возможно, мне нужно также использовать Java-скрипт для пересчета ширины при каждом изменении размера?

Вот изображение, иллюстрирующее то, чего я пытаюсь достичь. ( /files/images/324868.jpeg )

введите описание изображения здесь

Автор: Pochi Источник Размещён: 08.11.2019 11:08

Ответы (4)


4 плюса

Решение

Вы можете использовать tableсвойства для этой проблемы.

Это решение является кросс - браузер , но flexboxи css calcнет.

HTML:

<div class="container">
    <div class="left-div">left</div>
    <div class="right-div">right</div>
</div>

CSS:

.container{
    width: 100%;
    height: 200px;
    display: table;
}

.container > div{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.container .right-div{
    width: 200px;
    background: #ddd;
}
.container .left-div{
    background: #ccc;
}

Рабочий пример: https://jsfiddle.net/en2qt3L5/3/

Автор: Mohammad Reza Размещён: 20.08.2016 12:38

1 плюс

Flexbox FTW!

  • Установите displayв родительском контейнере значение flex.
  • Установите widthслева контейнер на 100%.
  • Установите widthсправа контейнер на 200px.

Live демо

.container {
  width: 100%;
  height: 200px;
  display: flex;
  border: 2px solid blue;
}
.left {
  width: 100%;
  background-color: #185218;
}
.right {
  width: 200px;
  background-color: #8c1919;
}
.left, .right {
  height: 100%;
  color: white;
  font-family: sans-serif;
  font-size: 32px;
  text-align: center;
}
<div class="container">
  <div class="left">Variable width</div>
  <div class="right">Fixed width</div>
</div>

Автор: Michał Perłakowski Размещён: 20.08.2016 09:58

0 плюса

Вы всегда можете использовать float: rightна вашем контейнере фиксированной ширины. Просто убедитесь, что вы сначала поместите контейнер фиксированной ширины , а затем установите margin-rightдля своего контейнера переменной ширины значение 200px.

JSFiddle здесь: https://jsfiddle.net/7j8uh0td/

HTML:

<div class="parent">
  <div class="fixed-width">
    ...
  </div>
  <div class="vari-width">
    ...
  </div>
</div>

CSS:

.parent {
  width: 100%;
  height: 200px;
  border: 1px solid blue;
  color: white
}

.vari-width {
  width: auto;
  margin-right: 200px;
  background: green;
  height: 100%;
}

.fixed-width {
  float: right;
  width: 200px;
  height: 100%;
  background: red;
}

Кроме того, вы могли бы использовать Flexbox - как @Gothdo предложил :)

Отличный сайт для ссылок и примеров CSS (который я до сих пор использую) http://learnlayout.com/

Надеюсь это поможет!

Автор: Geoff James Размещён: 20.08.2016 10:05

0 плюса

Просто установите displayправило дочерних элементов, inline-blockи тогда вычисления должны работать с использованием calcметода.

Вот пример.

body { margin: 0; }

.container {
  height: 200px;
  width: 100%;
  box-sizing: border-box;
  font-size: 0;
}

.left, .right {
  display: inline-block;
}

.left {
  width: calc(100% - 200px);
  min-height: 200px;
  background-color: green;
}

.right {
  background-color: tomato;
  height: inherit;
  width: 200px;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

Автор: DavidDomain Размещён: 20.08.2016 10:12
Вопросы из категории :
32x32