Есть ли предложенное свойство CSS3 «мягкое плавание»? - PullRequest
Новая
       6

Есть ли предложенное свойство CSS3 «мягкое плавание»?

1 голос
/ 16 марта 2011

Есть ли у кого-нибудь идеи, если в спецификации html5 или CSS3 запланировано что-либо относительно перемещения элементов.

Я назвал этот вопрос "мягкое плавание", так как меня интересует идея дать группе свойств css что-то вроде следующего ...

представьте, если вы хотите стилизованный список изображений ... 

<ul>
<li><img src='1.jpg'></li>
<li><img src='2.jpg'></li>
<li><img src='3.jpg'></li>
<li><img src='4.jpg'></li>
<li><img src='5.jpg'></li>
<li><img src='6.jpg'></li>
<li><img src='7.jpg'></li>
<li><img src='8.jpg'></li>
<li><img src='9.jpg'></li>
</ul>

и в стиле: - 

ul{
list-style:none;
}
li{
float:left;
}

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

В настоящее время смещение этих левых полей может привести к зацеплению одного или нескольких изображений, в результате чего остальные поплавки также окажутся не на своем месте (визуально, но на самом деле это не так с точки зрения отображения в браузере).

Мне интересно, может ли быть какое-либо предложение или атрибут для какого-то «мягкого плавающего», при котором элементы, выталкиваемые правым экстентом контейнера с плавающими элементами, будут эффективно возвращаться / очищаться при переносе нижний край всех предыдущих плавающих элементов.

Ничего себе. Имеет ли что-нибудь из этого смысл ...?

Ответы [ 2 ]

2 голосов
/ 16 марта 2011

Рассмотрим следующий пример:

HTML: 

<div>
    <!-- Images of varying heights -->
    <img src="[location]" alt="" />
</div>

CSS: 

img { vertical-align:middle; }

Это обеспечит эффект «плавного плавания» (я думаю),Если вам требуется какой-либо другой HTML, кроме изображений, у вас могут возникнуть проблемы, в зависимости от HTML.Я считаю, что вы могли бы уйти с добавлением большего количества встроенных элементов, однако блочные элементы сломали бы это, если бы вы не плавали их, что поднимало бы исходную проблему.

Я думаю, что идея мягкого плавающего будет трудной для вычислений браузерами, из-зак природе всплывающих элементов и как они должны себя вести.Если вы не указали высоту плавающего элемента, то IIRC это будет известно только во время выполнения после того, как элемент будет отрендерен?используя Javascript для вычисления такой высоты / ширины.

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

2 голосов
/ 16 марта 2011

Я думаю, что вижу, о чем вы.

Я думаю, что ваш желаемый макет уже достигнут display: inline-block.См. http://jsfiddle.net/pauldwaite/6eh23/

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

Однако я не следуюновые спецификации очень тесно.Если бы было что-то подобное, я думаю, что это было бы в одном из следующих модулей CSS3:

Вы можете просмотреть другие текущие спецификации на странице CSS «Текущая работа»:

...