инлайн!

htmlbr · July 1, 2011


#vk_like {
	float:right;
	margin:0px 143px 0px 0px;
	display:inline;
}

#fb-root  {
	display:inline;
	border:0px #FFF solid;

}

Привет.

почему кнопки #vk и #fb не хотят быть рядом?

Edited July 1, 2011 by htmlbr

Int · July 1, 2011

потому что одна из них float:right

htmlbr · July 1, 2011

это и мешает им быть inline?

SelenIT · July 2, 2011

Да, мешает. Плавающий блок автоматически становится блочным. Указание display:inline для плавающих элементов повелось с давних времен как лекарство от старого бага IE6 (удвоения margin-ов крайних элементов) и прижилось именно благодаря своей безопасности, т.к. в норм. браузерах inline при float игнорируется полностью.

htmlbr · July 2, 2011

Спасибо. А как их выровнять по правому блока в 900px краю обоих? Через inline и margin?

SelenIT · July 2, 2011

Инлайны (и инлайн-блоки) выравниваются через text-align предка (как слова текста).

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

htmlbr · July 2, 2011

Инлайны (и инлайн-блоки) выравниваются через text-align предка (как слова текста).

Ну то есть мне так действовать?

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

Два блока через флоат? но они же блоки - как они на одной линии будут?)

Edited July 2, 2011 by htmlbr

Int · July 2, 2011

А почему им не быть на одной линии? Они же float

SelenIT · July 2, 2011

htmlbr, а можно хоть примерную картинку, что это за элементы и в каком они контексте? Просто у каждого способа выравнивания — свои плюсы и минусы, вне контекста трудно решить, что оптимальнее.

htmlbr · July 2, 2011

флоат) но сказали что при флоат - элемент становится блочным! как же тогда 2 дива будут на одной линии?

это немного теоретический вопрос.

Но например http://cs9895.vkontakte.ru/u36659292/136868868/y_2f04aa20.jpg

Softlink · July 2, 2011

ну так же все становится в линию, не пойму в чем проблема

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head> 
<META http-equiv="Content-Type" content="text/html; CHARSET=Windows-1251"> 
<title>Таблица</title> 
<style type="text/css">
body{
margin:0;
padding:0;
}
.main{
border:1px solid #000;
width:1022px;
height:400px;
margin:100px auto;
overflow:hidden;
}

.left{
width:200px;
height:100px;
float:left;
background:green;
}

.right{
width:200px;
height:100px;
float:right;
background:red;
}


</style>
</head> 

<body>
	<div class="main">
		<div class="left"></div>
		<div class="right"></div>

	</div>

</body>
</html>

Edited July 2, 2011 by Softlink

SelenIT · July 2, 2011

Да, для таких кнопок однозначно инлайн (или инлайн-блок) лучше.

элемент становится блочным! как же тогда 2 дива будут на одной линии?

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

Инлайн-блоки тоже ужимаются по содержимому, зато пробелы между ними учитываются. Но у них есть и плюсы — они не выпадают из потока, поэтому для них не нужны выкрутасы типа clearfix-а для контейнера. И у них больше возможностей для вертикального выравнивания.

htmlbr · July 2, 2011

Илья, зайдите на 5 минут в аську пжста)

Sign In

инлайн!

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information