Вопрос:

css с плавающей точкой mins minwidth без перекрытия

css css-float

128 просмотра

1 ответ

3604 Репутация автора

Ну, я делаю «простой макет с 3 столбцами», базовая настройка - два столбца фиксированной ширины и (центральный) столбец, который растягивается, чтобы заполнить оставшуюся ширину.

Теперь есть небольшая «надстройка» к этому простому макету: я хочу иметь определенную минимальную ширину для центрального столбца, у css есть атрибут для этого, так что это казалось простым:

.content div {
  border:1px solid #bbb;  
  box-sizing: border-box;
}

.content-left {
  float: left;
  width: 200px;
}

.content-main {
  margin-left: 200px;
  margin-right: 200px;
  min-width: 200px
}

.content-right {
  float: right;
  width: 200px;
}

Однако это дало важную проблему: в тот момент, когда основной столбец достигает «минимальной ширины» (проверьте его, перетаскивая разделители в тестовой ссылке ниже), он начинает перекрываться с левым и правым столбцом. - Мне бы очень хотелось растянуть страницу, введя горизонтальную полосу прокрутки.

скрипка, чтобы проверить это

Автор: paul23 Источник Размещён: 08.11.2017 11:43

Ответы (1)


0 плюса

41990 Репутация автора

Решение

Это должно сделать это:

[layout] {
  display: flex;
}
#left {
  flex: 0 0 180px;
  background-color:#f00;
  margin-right: 20px;
}
#right {
  flex: 1 0 300px;
  background-color:#0ff;
}
<div layout>
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>

Смотрите flexподробности. Это flex-shrinkи flex-growделает тяжелую работу в этом случае. И значение по умолчанию flex-wrap, которое есть nowrap.

Не забудьте prefix.

Также обратите внимание на 300pxзначение flex-basis(третье значение в flexсокращении #rightэлемента. В данном случае это минимальная ширина этого элемента. Когда он становится меньше этого размера, появляется полоса прокрутки.

И вот он с 3 столбцами:

[layout] {
  display: flex;
}
[layout] > * {
  padding: 1rem;
}
#left, #right {
  flex: 0 0 180px;
}
#left {
  background-color:#f00;
}
#right {
  background-color:#0ff;
}
#middle {
  flex: 1 0 300px;
  margin: 0 10px;
  border: 1px solid #eee;  
}
<div layout>
    <div id="left">
        left
    </div>
    <div id="middle">
        middle
    </div>
    <div id="right">
        right
    </div>
</div>


Примечание: никто, кажется, не сказал вам, что горизонтальная полоса, которую вы пытаетесь достичь, - это то, чего остальной мир пытался избежать, когда они изобрели адаптивные макеты. Это считается очень плохим пользовательским интерфейсом, и Google снижает рейтинг сайтов, на которых нет адаптивных макетов.
Короче говоря, он потеряет вам (или клиенту) серьезные деньги. Чем важнее сайт, тем важнее потеря. Лучшее взаимодействие с пользователем - преобразование левой и правой боковых панелей в выдвижные ящики на небольших устройствах.

Автор: Andrei Gheorghiu Размещён: 09.11.2017 12:43
Вопросы из категории :
32x32