Коришћење ЦСС флоат-а за дизајнирање веб страница
ЦСС својство је веома важна својина за изглед. Омогућава вам да позиционирате дизајн веб страница тачно онако како желите да их прикажете - али да бисте га користили, морате разумјети како то функционише.
На листи стилова, ЦСС флоат својство изгледа овако:
.ригхт {флоат: десно; }
Ово говори претраживачу да све са класи "десно" треба да се креће удесно.
Овако би сте га доделили:
цласс = "ригхт" />
Шта можете пливати са ЦСС флоат Проперти?
Не можете пливати сваки елемент на веб страници. Можете само да плутате елементе блок-нивоа . Ово су елементи који заузимају блок простора на страници, као што су слике (), ставови (), подјеле () и листе ().
Други елементи који утичу на текст, али не стварају кутију на страници, називају се инлине елементи и не могу се покретати. Ово су елементи попут распона (), прекида линије (), јаког нагласка () или курзиву ().
Где пливају?
Можете плутати елементе десно или лево. Сваки елемент који прати пливајући елемент ће тећи око пливајућег елемента са друге стране.
На пример, ако плутам сликом с леве стране, сваки текст или други елементи који прате њега ће се кретати око ње удесно. И ако плутам слику са десне стране, сваки текст или други елементи који прате то ће се кретати око њега лево. Слика која је постављена у блок текста без икаквог флоат стила ће се приказати, међутим, прегледач је подешен да прикаже слике.
Ово је обично са првом линијом следећег текста приказаног на дну слике.
Колико далеко пливају?
Елемент који је пливао ће се померити што даље од леве или десне стране елемента контејнера. Ово доводи до неколико различитих ситуација у зависности од тога како је ваш код написан.
За ове примере, крећу мали ЛИВ елемент лево:
- Ако пливајући елемент нема унапред дефинисану ширину, он ће заузети толико хоризонталног простора колико је потребно и доступно, без обзира на пловак. Напомена: неки претраживачи покушавају поставити елементе поред пливајућих елемената када ширина није дефинирана - обично дајући непливајућем елементу само мали простор. Дакле, увек треба дефинисати ширину на пливајућим елементима.
- Ако је елемент контејнера ХТМЛ елемент, пливајући ДИВ ће се налазити на левој маргини странице.
- Ако је сам садржај контејнера сама садржао нешто друго, пливајући ДИВ ће седети на левој маргини контејнера.
- Можете гнијежити плутајуће елементе, а то може довести до тога да се пловак заврши на изненађујућем месту. На пример, ово пловило је ДИВ лево пливајући унутар десног пливајућег ДИВ-а.
- Пливајући елементи ће се сједити једни поред других ако постоји простор у контејнеру. На пример, овај контејнер има три ДИП елемента ширине 100пк који се лебде у контејнеру ширине 400пк.
Можете и да користите флоат да бисте креирали изглед галерије фотографија. Ставите сваку сличицу (најбоље ради када су исте величине) у ДИВ-у са натписом и пливају ДИВ елементе у контејнеру.
Без обзира на то колико је прозор прегледача широк, сличице ће се уједначавати.
Искључивање пловила
Једном када знате како да набавите елемент за плутање, важно је знати како искључити пловак. Искључите флоат помоћу ЦСС чистог својства. Можете да обришете лево пловило, десно пловидбе или обоје:
јасно: лево;
јасно: право;
јасно: обоје;
Сваки елемент за који сте поставили јасно својство ће се појавити испод елемента који се креће у том правцу. На пример, у овом примеру прва два пасуса текста нису обрисана, али трећа је.
Играјте с јасном вредношћу различитих елемената у документима како бисте добили различите ефекте распореда.
Један од најинтересантнијих плочастих распореда је серија слика низ десно или лево стабло поред пасуса текста. Чак и ако текст није довољно дугачак за скроловање поред слике, можете користити јасну слику на свим сликама како бисте били сигурни да се оне појављују у колони умјесто поред претходне слике.
ХТМЛ (поновите овај пасус):
Дуис је прешао на седам до осамдесетих година, што је у великој мери представљало велуптате. Купидатат неидентификован, у лабору и долоре магна алкуа.
ЦСС (за плутање слика налево):
имг.флоат {флоат: лефт;
јасно: лево;
маргин: 5пк;
}
А на десно:
имг.флоат {флоат: ригхт;
јасно: право;
маргин: 5пк;
}
Коришћење Флоатс фор Лаиоут
Једном када схватите како функционише флоат, можете почети да га користите како бисте поставили своје веб странице. Ово су кораци које сам преузео да направим пливајућу веб страницу:
- Дизајнирајте изглед (на папиру или у графичком алату или у мојој глави).
- Одредите где ће се поделити странице.
- Одредите ширину различитих контејнера и елементе унутар њих.
- Пливати све. Чак и најслабији контејнерски елемент лебди се лево, тако да знам где ће бити у односу на порт прегледача прегледача.
Докле год знате ширине (проценти су добри) од ваших одломака, можете користити флоат својство да их ставите тамо где припадају на страници. И лепа ствар је што не морате бринути колико је модел кутије другачији за Интернет Екплорер или Фирефок.