Блог

Главная - Вопросы по программированию - Есть ли какой-либо способ установить минимальную ширину CSS для элемента, который перемещается?

Есть ли какой-либо способ установить минимальную ширину CSS для элемента, который перемещается?

#html #css-float #css

#HTML #css-float #css

Вопрос:

У меня есть этот html:

 <div id="subNav"></div>
<div id="feed"></div>
<div id="feedBar"></div>

Я переместил все эти оставленные разделы. Я устанавливаю ширину #subNav и #feedBar , но на #feed я устанавливаю его минимальную ширину . Он принимает минимальную ширину, даже если окно больше. Есть ли какой-либо способ, которым с помощью floating вы можете заставить минимальную ширину работать? Я пытаюсь создать гибкий макет на странице.

Комментарии:

1. Плавающий элемент уменьшится до размера его содержимого, или width , min-width или max-width (в зависимости от того, что определено).

2. @David Есть ли какой-либо способ переопределить это поведение? с помощью javascript?

3. да. Конечно. Однако вам нужно определить, какой вы хотите видеть ширину. С точки зрения экрана или его родительского элемента? Также: можете ли вы определить, что вы подразумеваете под «заставить min-width работать»?

4. Вы, конечно, могли бы использовать JavaScript, чтобы установить ширину #feed равной ширине окна минус ширины #subNav и #feedBar. Тогда вы также хотели бы установить обработчик изменения размера в окне, чтобы при необходимости повторно установить ширину #feed . Но есть много разных способов подойти к этому, многие из которых не требуют JavaScript. Загуглите «Макет из 3 столбцов с жидким центром» и найдите тот, который имеет смысл для вас и легко интегрируется с тем, что у вас есть на данный момент.

5. @David Что я имею в виду под «заставить min-width работать», так это сделать так, чтобы при настройке окна лента заполняла промежуточное пространство. Я хочу, чтобы ширина была не менее 500 пикселей и занимала весь экран. Ширина #subNav и #feedBar равны 175px и 250px соответственно.

Ответ №1:

В следующем ответе используется решение на JavaScript в ответ на комментарий @Chromedude (к исходному вопросу):

@David Есть ли какой-либо способ переопределить это поведение? с помощью javascript?

Я уверен, что есть гораздо более простой способ сделать это (конечно, с помощью библиотеки JavaScript), но это лучшее, что я смог придумать в это время утра (в Великобритании):

 var feed = document.getElementById('feed');
var width = document.width;
var feedBarWidth = document.getElementById('feedBar').clientWidth;
var subNavWidth = document.getElementById('subNav').clientWidth;
feed.setAttribute('style', 'width: '   (width - (subNavWidth   feedBarWidth))   'px');

Демонстрация JS Fiddle.

Используя jQuery (просто как предложение относительно простоты, предлагаемой библиотекой):

 var bodyWidth = $(document).width();
var subNavWidth = $('#subNav').width();
var feedBarWidth = $('#feedBar').width();
$('#feed').css('width', bodyWidth - (subNavWidth   feedBarWidth));

Ответ №2:

Используйте сеточную систему, такую как в Foundation 3. При размещении на div представляющем элемент сетки, min-width работает просто отлично.

Чтобы заставить min-width работать без сетки, используйте правило CSS, которое вставляет невидимый псевдоэлемент с желаемой минимальной шириной абзаца.

 p:before {
  content: "";
  width: 10em;
  display: block;
  overflow: hidden;
}

Более подробная информация находится в источнике, где я узнал об этом.