[Задать SM: CSS] равные интервалы, CSS Замена шрифта

Это наша четвертой партии Ask SM, показывая на вопросы читателей о веб-дизайне, ориентируясь на HTML, CSS и JavaScript.

В этой статье мы рассмотрим, как можно распределить пространство по горизонтали между элементами равномерно, как можно добиться максимального сторон по изображениям; you’ будем также изучения передового опыта для CSS замены шрифта и ответы на пару вопросов QuickFire.Если у вас есть вопросы о CSS или JavaScript, не стесняйтесь связаться со мной (Chris Coyier) с помощью одного из этих способов:

Отправить письмо задать [в] SmashingMagazine [точка] com с question.
Задайте свой вопрос в нашем forum.
Или, если у вас есть быстрый вопрос, просто твит нас @ smashingmag или @ chriscoyier.

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

Распределение горизонтального пространства между элементами evenly

Антуан Nicolas пишет:

Знаете ли Вы, как прекрасно и динамически распределять объекты по горизонтали в контейнере с помощью CSS

Привет Антуан, это классический пример того, что довольно трудно сделать в CSS, но, вероятно shouldn’ т быть.Я подошел к этой проблеме в целом ряде различных способов В past.Я пересматривал немного сейчас, и I’ VL представить то, что я считаю, является лучшим решением here.

equal distance

Let’ отзыв с конкретными целями:

левый most объекта левый aligned со своими родителями element.
право-most объекта правом aligned со своими родителями element.
Все объекты equidistant друг от друга на всех times.
Объекты будут остановятся overlapping. Друг друга, как в окне браузера сужается (в идеале)
Объекты не будет wrap. Вниз, как в окне браузера сужается (в идеале)
Техника будет работать в жидкости шириной environment, даже тот, который centered.

Теории является то, что первый объект будет выровнен по левому краю, а остальные объекты будут выровнены по правому краю внутри одинакового размера коробки, которые занимают все остальное пространство.Вот иллюстрация того, что я имею в виду:

floaties

HTML-разметку:

 name="code"><div id="row">
	<img src="images/shape-red.png">
	<div id="movers-row">
		<div><img src="images/shape-green.png"></div>
		<div><img src="images/shape-yellow.png"></div>
		<div><img src="images/shape-blue.png"></div>
	</div>
</div>

CSS:

 name="code">#row {
    min-width: 480px;
}

#movers-row {
	margin: -120px 0 0 120px;
}

#movers-row div {
	width: 33.3%;
	float: left;
	min-width: 120px;
}

#movers-row div img {
	float: right;
}

И здесьв живая demo.

Максимальная сторон по Images

max side

Джей-ДжейСильвия IV пишет:

Есть ли способ определить размер выводимого изображения и изменить < IMG ширина = ” “/ >? Установкой на основе общей шириной Иногда я изображениями с очень большой высоты, и я в них нуждается, который будет отображаться с гораздо меньшей ширины, чем другие images.

Я разговаривал с Джей-Джейнемного больше об этом, чтобы прояснить проблему.Проблема на самом деле относится к height: у вас есть много фотографий, и все они имеют разные размеры.Вы можете установить максимальную ширину, чтобы убедиться, что они сохранить свои отношения и все получают сжал в правой ширину, но оставляет “ jagged” высотам.Другими словами, когда вы контролируете only Ширина, вы получаете выгоду от поддержания имиджа отношение, но вы не можете контролировать высоту и может закончиться с очень высоким изображений завинчивания вашей layout.

Так как же вы контролируете both высоту и ширину, сохраняя при этом отношение?Мы должны будем опираться на некоторые JavaScript, потому что мы должны выполнить некоторые расчеты.Как я рада, что JQuery парень, we’ будем использовать это.JQuery является хорошим выбором здесь в любом случае, хотя, потому что мы должны быть ориентированы на каждое изображение на странице и делать такие вещи делать, и JQuery делает это очень легко и рипы через job.

Лучший маршрут, чтобы превратить это в плагин, который сделает его очень легко вызовов, а также позволить ему быть закован в цепи и все, что хорошие вещи.We’ будем называть это “ maxSide”.Он смотрит на каждом элементе он призывает и выясняет, какое измерение больше.Если it’ с шириной, она устанавливает ширину “ maxSide” (с пиксель установка прошла в).Если it’ с высоты, он устанавливает высоту до “ maxSide”.

Вот плагина:

 name="code">(function($) {

   $.fn.maxSide = function(settings) {

   // if no paramaters supplied...
   settings = $.extend({
      maxSide: 100
   }, settings);

   return this.each(function() {

      var maximum = settings.maxSide;
      var thing = $(this);
      var thewidth = thing.width();
      var theheight = thing.height();

      if (thewidth >= theheight) {
         if (thewidth >= maximum) {
            thing.attr({
               width: maximum
            });
         }
      }

      if (theheight >= thewidth) {
         if (theheight >= maximum) {
            thing.attr({
               height: maximum
            });
         }
      }

   });	

};

})(jQuery);

Так как мы собираемся называть это плагин с изображениями, мы должны убедиться, что все изображения будут загружаться в первую очередь.Таким образом, вместо того, чтобы называть его, когда DOM будет готов, как вы видите, в большинстве JQuery, мы должны называть это когда окно имеет loaded.

 name="code">$(window).bind("load", function() {
	$("img").maxSide({ maxSide: "100" });
});;

Это может вызвать некоторые неприглядные вспышки большой images… C’ Est La Vie.Если it’ действительно действительно ужасно, вы можете пожелат� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 23.03.2009 by Newsbot