CSS. Три столбца, внешние две переменной ширины, но обертывающие их содержимое, середина расширяется, чтобы заполнить доступное горизонтальное пространство - PullRequest
Новая
       39

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

0 голосов
/ 26 января 2019

У меня есть простой бит HTML следующим образом: 

<div class="row">
  <div class="col col--outer col--left">
    Variable content here but the div should fit snuggly round it
  </div>
  <div class="col col--middle">
    <!-- This div should fill the space left on the row -->
  </div>
  <div class="col col--outer col--right">
    Variable content here but the div should fit snuggly round it
  </div>
</div>

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

Средний столбец необходимо расширить, чтобы он соответствовал пространству, оставленному в строке.

Если бы внешние столбцы имели фиксированный размер, это значительно упростило бы задачу, но, к сожалению, это не так.

Любые идеи о том, как справиться с этим?

Пользователь @SuperDJ попросил я также показать CSS, так что вот оно: 

.row {}
.row .col--outer {}
.row .col--middle {}

Ответы [ 2 ]

0 голосов
/ 26 января 2019

Следующий пример даст внешним столбцам все пространство, а середина просто заполнит то, что осталось 

.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  /* 
  grid-template-columns: repeat(3, 1fr); to make them equal width */
  width: 100%;
}

.col--left {
  grid-column: 1;
}

.col--middle {
  grid-column: 2;
}

.col--right {
  grid-column: 3;
}

img {
  display: block;
  width: 200px; /* Could also be 100% */
  height: auto;
}
<div class="row">
  <div class="col col--outer col--left">
    <img src="https://cdn.pixabay.com/photo/2018/11/29/21/19/hamburg-3846525_960_720.jpg">
  </div>
  <div class="col col--middle">
    <!-- This div should fill the space left on the row -->
    middle
    there is so much text in here
  </div>
  <div class="col col--outer col--right">
    <img src="https://cdn.pixabay.com/photo/2018/11/29/21/19/hamburg-3846525_960_720.jpg">
  </div>
</div>
0 голосов
/ 26 января 2019 
.row{
    display: flex;
    flex-direction: row ;
    width: 100%
}

.col--left,.col--right{
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
}

.col--middle{
    flex-grow: 1;
    flex-shrink: 1;
}

flex-basis:auto; для левого и правого элемента, поэтому требуется точная ширина, которую он должен отображать. flex-grow: 0; и flex-shrink: 0, чтобы запретить им изменять размер.

flex-grow: 1 и flex-shrink: 1 до среднего элемента, поэтому он занимает все оставшееся пространство.

...