Хитрое выравнивание

nim_cch · February 16, 2009

<div>
    <div style="display:inline">Этот div должен быть выровнен по левому краю</div>
    <div style="display:inline">Этот div должен быть выровнен по правому краю</div>
</div>
<!--и все это должно находиться на одной строке без переносов-->

DjTarik · February 16, 2009

А чем float не подходит? O_o

NuShiKo · February 16, 2009

#block1{float: left; width: 45%; text-align:left;}

#block2{float: right; width: 45%; text-align:right;}

nim_cch · February 16, 2009

Не работает :rolleyes:

<html>
    <head>
        <title></title>
        <style>
            .block1{float: left; width: 45%; text-align:left;}
            .block2{float: right; width: 45%; text-align:right;}
        </style>
    </head>
    <body>
    <div style="background-color:Teal;width:400px">
        <ul>
            <li>
                <div class="block1">1</div>
                <div class="block2">2</div>
                <ul>
                    <li>
                        <div class="block1">1</div>
                        <div class="block2">2</div>
                    </li>
                </ul>
            </li>
            <li>
                <div class="block1">1</div>
                <div class="block2">2</div>
            </li>
        </ul>
    </div>    
    </body>
</html>

Edited February 16, 2009 by nim_cch

NuShiKo · February 16, 2009

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

а вот ваш последний пример, слегка переделанный

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#all {position: absolute; top: 0; left: 0; background-color: teal; width: 400px; border: 0; margin: 0; padding: 0; height: auto;}
.block1{float: left; width: 45%; text-align:left;}
.block2{float: right; width: 45%; text-align:right;}
ul {border: 0; margin: 0; padding: 0; list-style: none;}
li {border: 0; margin: 0; padding: 0;}
</style>
</head>
<body>
<div id="all">
		<ul>
			<li><span class="block1">1</span><span class="block2">2</span></li>
			<li><span class="block1">1</span><span class="block2">2</span></li>
			<li><span class="block1">1</span><span class="block2">2</span></li>
		</ul>
</div>
</body>
</html>

Edited February 16, 2009 by NuShiKo

nim_cch · February 17, 2009

Вы не правильно переделали мой пример. Объясню в чем суть. У меня есть дерево ul \ li и мне нужно что бы независимо от того сколько было вложений, вконце каждого li стояла кнопка, и все кнопки должны быть на одном уровне.

Вобщем мне нужно добиться того же эффекта что на картинке. Другими словами мне нужно внутри каждого li сделать два контейнера в первом будет название, во втором кнопки. И выравнивание в первом влево, во втором вправо.

Edited February 17, 2009 by nim_cch

Ogalig · February 17, 2009

Мне бы было неудобно пользоваться таким деревом, если честно. Искать какой карандаш какой строчке соответствует ..

Great Rash · February 17, 2009

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">

<head>
	<title>Div'ы Колонки одинаковой высоты</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
		font: 12px Arial;
	}

	div {
		float: left;
		width: 250px;
		border: red 1px solid;
	}

	ul {
		margin-left: 25px;
	}

	li {
		display: block;
	}

	li.left {
		float: left;
	}

	li.right {
		float: right;
	}

	li.none {
		clear: both;
	}

	li.clear {
		clear: left;
	}

	img {
		float: left;
		width: 10px;
		height: 10px;
		border: #aaa 1px solid;
	}
	</style>
</head>

<body>

<div>
	<ul>
		<li class="left">text №1</li>
		<li class="right">
			<img src="img.gif" alt="" />
			<img src="img.gif" alt="" />
			<img src="img.gif" alt="" />
		</li>
		<li class="none">
			<ul>
				<li class="left">text №2</li>
				<li class="right">
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
				</li>
				<li class="clear left">text №3</li>
				<li class="right">
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
				</li>
				<li class="clear left">text №4</li>
				<li class="right">
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
				</li>
			</ul>
		<li>
		<li class="none">
			<ul>
				<li class="none">
					<ul>
						<li class="left">text №5</li>
						<li class="right">
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
						</li>
						<li class="clear left">text №6</li>
						<li class="right">
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
						</li>
					</ul>
				</li>
			</ul>
		<li>
	</ul>
</div>

</body>
</html>

Great Rash · February 17, 2009

Извиняюсь за 2 поста сразу... Совсем забыл про долбаный IE. Вот вариант, который работает в IE6 и в Мозилле. Больше нигде не проверял...

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">

<head>
	<title>Div'ы Колонки одинаковой высоты</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
		font: 12px Arial;
	}

	#ie-only {
		display: none;
	}

	#mozilla-only {
		display: block;
	}

	div {
		float: left;
		width: 250px;
		border: red 1px solid;
	}

	ul {
		margin-left: 25px;
		list-style: none;
	}

	li {
		display: block;
	}

	li.left {
		float: left;
	}

	li.right {
		float: right;
	}

	li.none {
		clear: both;
	}

	li.one-pixel {
		height: 1px;
	}

	li.clear {
		clear: left;
	}

	img {
		float: left;
		width: 10px;
		height: 10px;
		border: #aaa 1px solid;
	}
	</style>

	<!--[if IE 6]>
		<style type="text/css">
			#ie-only {
				display: block;
			}

			#mozilla-only {
				display: none;
			}
		</style>
	<![endif]-->
</head>

<body>

<div id="ie-only">
	<ul>
		<li class="left">text №1</li>
		<li class="right">
			<img src="img.gif" alt="" />
			<img src="img.gif" alt="" />
			<img src="img.gif" alt="" />
		</li>
		<li>
			<ul>
				<li class="left">text №2</li>
				<li class="right">
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
				</li>
				<li></li>
				<li class="left">text №3</li>
				<li class="right">
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
				</li>
				<li></li>
				<li class="left">text №3</li>
				<li class="right">
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
				</li>
			</ul>
		</li>
		<li>
			<ul>
				<li class="one-pixel">
					<ul>
						<li class="left">text №2</li>
						<li class="right">
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
						</li>
						<li></li>
						<li class="left">text №3</li>
						<li class="right">
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
						</li>
						<li></li>
						<li class="left">text №3</li>
						<li class="right">
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

<div id="mozilla-only">
	<ul>
		<li class="left">text №1</li>
		<li class="right">
			<img src="img.gif" alt="" />
			<img src="img.gif" alt="" />
			<img src="img.gif" alt="" />
		</li>
		<li class="none">
			<ul>
				<li class="left">text №2</li>
				<li class="right">
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
				</li>
				<li class="clear left">text №3</li>
				<li class="right">
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
				</li>
				<li class="clear left">text №4</li>
				<li class="right">
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
					<img src="img.gif" alt="" />
				</li>
			</ul>
		<li>
		<li class="none">
			<ul>
				<li class="none">
					<ul>
						<li class="left">text №5</li>
						<li class="right">
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
						</li>
						<li class="clear left">text №6</li>
						<li class="right">
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
							<img src="img.gif" alt="" />
						</li>
					</ul>
				</li>
			</ul>
		<li>
	</ul>
</div>

</body>
</html>

nim_cch · February 17, 2009

Извиняюсь за 2 поста сразу... Совсем забыл про долбаный IE. Вот вариант, который работает в IE6 и в Мозилле. Больше нигде не проверял...

Спасибо за ваш вариант, он довольно близок к реальности. В IE7 не работает. И кроме того вы вмешались в стили самих li ul, а стили для них уже прописанны и они конфликтуют с вашими. Поэтому я и говорил про два контейнера..

nim_cch · February 17, 2009

Мне бы было неудобно пользоваться таким деревом, если честно. Искать какой карандаш какой строчке соответствует ..

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

Great Rash · February 17, 2009

В IE7 не работает

А если conditional comments переписать вот так:

<!--[if lte IE 6]>
		<style type="text/css">
			#ie-only {
				display: block;
			}

			#mozilla-only {
				display: none;
			}
		</style>
	<![endif]-->

И кроме того вы вмешались в стили самих li ul, а стили для них уже прописанны и они конфликтуют с вашими.

Ну ведь ничего не стоит написать новые стили (или дописать новые правила к уже существующим).

nim_cch · February 17, 2009

Проблема не только в этом. Если я приму ваш вариант, мне придется переписать еще кучу хорошо отлаженного кода для генерации этого самого дерева. Поскольку у вас два li на одну строчку, и честно говоря у меня нет желания это делать еще и потому что это две совершенно разных задачи. Задача архитектуры и задача разметки. Одно должно быть независимо от другого. Кроме того ваш вариант не позволит сделать элементы дерева двух строчными (скажем для того что бы добавить описание во второй строке). Вернее это можно будет сделать, но для этого придется переписывать стиль, а это не всегда удобно. Я же стремлюсь сделать так, что бы архитектура не накладывала ограничений, другими словами на одной странице это одно дерево, на другой это уже двухстрочное дерево, на третей это дерево с чекбоксами и т.п. и для этого не надо переписывать стили и код, нужно всего лишь написать шаблон для одного узла.

Edited February 17, 2009 by nim_cch

Great Rash · February 17, 2009

Ох как все усложнилось-то...

А на картинке, приведенной вами, все было достаточно просто...

Ну, как говорится, мое дело предложить, а ваше - отказаться.

SelenIT · February 17, 2009

А вложить картинку в описание (в самое начало), зафлоатить вправо и сдвинуть отрицательным маргином на нужную величину - не вариант?

NuShiKo · February 17, 2009

Честно говоря так и не услышала ответа на вопрос что именно не работает здесь:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
		#all {position: absolute; top: 0; left: 0; background-color: teal; width: 400px; border: 0; margin: 0; padding: 0; height: auto;}
			.block1{float: left; width: 45%; text-align:left;}
			.block2{float: right; width: 45%; text-align:right;}
			ul {border: 0; margin: 0; padding: 0; }
			.podmenu li {padding: 0 0 0 20px;}
		</style>
	</head>
	<body>
	<div id="all">
	<div style="background-color:Teal;width:400px">
		<ul>
			<li>
				<div class="block1">1</div>
				<div class="block2">2</div>
				<ul class="podmenu">
					<li>
						<div class="block1">1</div>
						<div class="block2">2</div>
					</li>
				</ul>
			</li>
			<li>
				<div class="block1">1</div>
				<div class="block2">2</div>
			</li>
		</ul>
	</div>
	</div>
	</body>
</html>

это ваш пример очень незначительно измененный, ну и стили я же не знаю какие у вас прописаны поэтому немножко прописала, смотрела в ie7, opera 9 - все работает вроде так как надо...

nim_cch · February 19, 2009

Честно говоря так и не услышала ответа на вопрос что именно не работает здесь:

Посмотрите ваш код в ie7 или ff3. Посмотрите в каком месте располагаются кружочки, вместо них будут стоять + -, другими словами ваш пример ломает структуру дерева. Я же говорил, что нельзя трогать сами ul \ li, нужен стиль для div или другого контейнера. Кстати почему то никто не предложил использовать table в качестве контейнера. Я пробывал но происходит перенос на другую строку.

html это тихий ужас :rolleyes: . не понимаю почему нет опции fill, width:fill. Это решило бы все мои проблемы. Между прочим в виндовс программах такая опция есть и в xaml тоже.

А вложить картинку в описание (в самое начало), зафлоатить вправо и сдвинуть отрицательным маргином на нужную величину - не вариант?

Может и вариант если вы покажете что имели ввиду.

NuShiKo · February 21, 2009

Эх.. попробую еще раз :rolleyes: все тоже самое, но картинки идут вторым дивом - минус в том, что неудобно будет искать соответствие, стили вроде не трогала вообще...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#all {position: absolute; top: 0; left: 0; background-color: teal; width: 400px; border: 0; margin: 0; padding: 0; height: auto;}
.block1{float: left; width: 45%; text-align:left;}
.block2{float: right; width: 45%; text-align:right;}
</style>
</head>
<body>
<div id="all">
		<div class="block1">
		<ul>
			<li>1<ul><li>2</li><li>3</li></ul></li>
			<li>1</li>
			<li>1</li>
		</ul>
		</div>
		<div class="block2">
		<ul>
			<li>1</li>
			<li>1</li>
			<li>1</li>
		</ul>
		</div>
</div>
</body>
</html>

dber · February 22, 2009

1. сделай фиксированную высоту для li и для всех вложенных div

2. убери inline

3. для текста можешь задать overflow:hidden; и ну и для красоты сделай li одинаковый width ; должно сработать

первый див float:left (в нем текст), второй див float:right; в нем кнопки... посчитай размер этих кнопок заранее.....

если количество кнопок любое, то

</div>

если не прокатит пришли свой код для экспериментов))

Edited February 22, 2009 by dber

nim_cch · February 25, 2009

если не прокатит пришли свой код для экспериментов))


<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>PPC</title>
    <style type="text/css">

        .div_par
        {
        	text-align  : right;
        	width       : 300px;
        	height      : 20px;
        }

        .div_left
        {
        	float       : left; 
        	white-space : nowrap; 
        	height:20px;
        	background-color:#0099ee;
        }

        .div_right
        {
            height:20px;
            display:inline;
            background-color:#00ee99;
        }

    </style>
</head>
<body>

<div style="width:300px;border:Solid 1px Black">
    <ul>
        <li>
            <div class="div_par">
                <div class="div_left" >1</div>
                <div class="div_right">2</div>
            </div>
        </li>
        <li>
            <div class="div_par">
                <div class="div_left" >1</div>
                <div class="div_right">2</div>
            </div>
            <ul>
                <li>
                    <div class="div_par">
                        <div class="div_left" >1</div>
                        <div class="div_right">2</div>
                    </div>
                </li>
                <li>
                    <div class="div_par">
                        <div class="div_left" >1</div>
                        <div class="div_right">2</div>
                    </div>
                </li>
            </ul>
        </li>
        <li>
            <div class="div_par">
                <div class="div_left" >1</div>
                <div class="div_right">2</div>
            </div>
        </li>
        <li>
            <div class="div_par">
                <div class="div_left" >1</div>
                <div class="div_right">2</div>
            </div>
        </li>
    </ul>
</div>

</body>
</html>

Хотя если для div_par поставить длинну на 100% похоже работает. Всем большое спасибо.

Sign In

Хитрое выравнивание

Question

Link to comment

Share on other sites

19 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

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