CSS float: none и margin-right - PullRequest
Новая
       20

CSS float: none и margin-right

0 голосов
/ 26 августа 2011

Я только что прошел какое-то руководство по адаптивному веб-дизайну или гибким макетам.

В этом примере макет с тремя столбцами автоматически преобразуется в макет с двумя столбцами при меньших размерах экрана. Они сделали это возможным благодаря двум свойствам CSS; 

float:none
margin-right:0

Не могли бы вы помочь мне понять, как это происходит, и на основании чего рассчитывается маржинальное право?

Ссылка на пример http://www.alistapart.com/articles/responsive-web-design/

Ответы [ 2 ]

2 голосов
/ 27 августа 2011

Статья определенно показывает вам пример того, как я это делаю, поэтому вы можете адаптировать ее к вашим конкретным потребностям.Вам нужно будет сделать шаг вперед.Надеемся, что следующие объяснения и ответ @ Wesley помогут вам сделать это.

float: none

Установив float: none для элементов (которые были ранее перемещены),это заставляет эти элементы накладываться друг на друга для экранов такого размера .Плавающее, очевидно, вызвало выравнивание элементов из стороны в сторону.

margin-right: 0

В этом примере они устанавливают margin-right: 0так что эти образы выстраиваются в линию с правой стороны.Если вы заметили, эти изображения являются самыми правыми для экранов этих размеров .Если бы margin-right не было установлено равным нулю, оно унаследовало бы стиль .figure, который имеет с примененным margin-right.

1 голос
/ 26 августа 2011

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

http://www.w3.org/TR/css3-mediaqueries/

Пример в файле CSS: 

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

Пример с использованием mediaатрибут тега <link>: 

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="my-media-specific-stylesheet.css" />

http://www.alistapart.com/articles/responsive-web-design/

К счастью, W3C создал медиазапросы как часть спецификации CSS3, улучшая обещание типов медиа.,Медиа-запрос позволяет нам ориентироваться не только на определенные классы устройств, но и фактически проверять физические характеристики устройства, отображающего нашу работу.Например, после недавнего появления мобильного WebKit, медиа-запросы стали популярной техникой на стороне клиента для доставки адаптированной таблицы стилей на iPhone, телефоны Android и тому подобное.Для этого мы могли бы включить запрос в медиа-атрибут связанной таблицы стилей:

Запрос содержит два компонента:

  1. тип носителя (экран)и
  2. фактический запрос, заключенный в круглые скобки, содержащий конкретную медиа-функцию (max-device-width) для проверки, за которой следует целевое значение (480px).

В простом видеПо-английски, мы спрашиваем устройство, равно ли его горизонтальное разрешение (max-device-width) или меньше, чем 480px.Если тест пройден - другими словами, если мы просматриваем нашу работу на устройстве с небольшим экраном, таком как iPhone, - тогда устройство загрузит shetland.css.В противном случае ссылка полностью игнорируется.

...