width: 25% + float

klierik · October 9, 2008

приветствую.

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

если не понятно о чем речь:

имеем 3 колонки данных шириной 25%. при сужении окна под IE последний блок слетает.

Знаю несколько вариантов решения данной проблемы но хотелось бы что то более универсальное. у кого какие идеи (или линки) есть на этот счет?

Vlad · October 10, 2008

min-width скорее всего для IE7 и его эмуляция через behavior для IE6.

klierik · October 10, 2008

min-width на сами блоки тут не нужен, так как на страницу будет ограничение стоять в целом.

или я не понял ход мыслей...

дело в том, что IE процентные значения округляет иначе других браузеров, из за чего один из блоков получается больше других блоков, в последствии чего он и слитает вниз.

пока что самое удобное решение, что мне довелось использовать, это повесить на последний блок

position: absolute; top: 0; right: 0;

только дело в том, что приходится вешать дополнительный класс на блок (из за IE6), чего б делать не хотелось бы.

expression не хочу использовать.

Vlad · October 10, 2008

min-width конечно же имел в виду на контейнер надо ставить.

Можно еще попробовать задать ширину 24.5% или что-то вроде того. На IE бывает действует.

А точно три колонки будет по 25%? а то нестыковочка получается.

klierik · October 10, 2008

Quote
min-width конечно же имел в виду на контейнер надо ставить.

Влад, а в чем смысл. я что то понять не могу (((

Quote
Можно еще попробовать задать ширину 24.5%

а IE все равно не "хавает" значения после запятой. Только в em`ах

Quote
А точно три колонки будет по 25%? а то нестыковочка получается.

4 блока по 25%. ну как бы 4 колонки. это без проблемно реализуется на основе таблицы, но уж больно не хочется её туда пихать

Scrum · October 10, 2008

может быть в таком ключе ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
html, body {
  margin: 0;
  padding: 0;
}
#carrier {
  white-space: nowrap;
  font-size: 0;
  padding: 1px 0;
}
.inline_block {
  display: inline;
  padding: 0 12% 0 13%;
  border: 1px solid silver;
}


  /*]]>*/
  </style>
</head>

<body>
	<div id="carrier">
		<div class="inline_block"><img /></div>
		<div class="inline_block"><img /></div>
		<div class="inline_block"><img /></div>
	</div>
</body>

</html>

hmelii · October 10, 2008

Для этих блоков с 25% шириной задай clear:right

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
.over{overflow:hidden; display:block!important; /*IE6*/display:inline-block;}
.bl{float:left; width:25%; clear:right; border:1px solid red;}
html,body{ margin:0; padding:0;}
</style>
</head>

<body>

<div class="over">
<div class="bl">1</div>
<div class="bl">2</div>
<div class="bl">3</div>
<div class="bl">4</div>
</div>


</body>
</html>

Мой сайт

Edited October 10, 2008 by hmelii

rash · October 10, 2008

Давайте сначала подумаем, почему известные вам варианты кажутся неуниверсальными, и что в них вам не нравится, чтобы понять, от чего нужно избавиться в решении :-)

klierik · October 10, 2008

2Scrum, интересное решение. надо будет попробывать.

2hmelii, в ИЕ6 уже слетит высота, так как hasLayout стоит -1. а inline-block, здесь не играет роли. Проблема в рамках IE

2rash, так или иначе надо добавлять дополнительный класс, чего делать не хочу. в этом загвоздка =)

hmelii · October 13, 2008

klierik said:
2Scrum, интересное решение. надо будет попробывать.
2hmelii, в ИЕ6 уже слетит высота, так как hasLayout стоит -1. а inline-block, здесь не играет роли. Проблема в рамках IE
2rash, так или иначе надо добавлять дополнительный класс, чего делать не хочу. в этом загвоздка =)

Сам понял что сказал Ты сначало попробуй а потом пиши Ничего там не слетает inline-block включает has-layout для внешнего контейнера Чтобы он не сворачивался при содержании в себе плавающих блоков Пример работает во всех браузерах Все четко и стабильно

Sign In

width: 25% + float

Question

klierik

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

hmelii

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

hmelii

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information