Разместване...

S

SLADE

Registered
Здравейте, колеги. Опитвам се да направя една кутия от ляво и една от дясно, като надолу продължава по същия начин, но нищо не става, защото се разместват. Прилагам снимка за да разберете по-добре...
http://store.picbg.net/pubpic/49/73/f911e04a3fa54973.png
Трябва да стане като в първите два резултата, една кутия от ляво и до нея една от дясно, като надолу пак една от ляво и една от дясно, но по-надолу вече има много разместване. Защо се получава така?
CSS кода, който съм написал ми е следния:
[css]
#lqvo {
float: left;
width: 399px;
margin: 0 20px 0 0;
padding: 0px 0;
}
#dqsno {
float: right;
background-color: #f2f2f2;
width: 263px;
margin: 0 10px 0 0;
padding: 0px 0;
}
[/css]
Като на лявата кутия съм написал <div id='lqvo'>INFO</div>, а на дясната <div id='dqsno'>INFO</div>
Надявам се да знаете от какво се получава така и как да го оправя, че вече ме изнервя - едно и също 1 час и не става и не става...
Благодаря Ви предварително за помоща!
 
искаш проба 1 и проба 2 да са едно до друго и проба 3 и проба 4 пак....
проба 1 и 2 с float left, след това изчистваш с clear:both; и за другите 2 пак по същия начин няма ли да стане?
 
Здравей. Искам следното нещо:

Проба1 <---> Проба2
Проба3 <---> Проба4
Проба5 <---> Проба6
Проба7 <---> Проба8

Като в момента на Проба1, Проба3, Проба5 и Проба7 съм задал <div id='lqvo'>, а на Проба2, Проба4, Проба6 и Проба8 съм задал <div id='dqsno'>


CSS файла съм го показал в предишното ми мнение. Дано сега ме разберете и ми помогнете. Много ще съм Ви благодарен!!!
Поздрави!
 
HTML: 
<div id='lqvo'><h2 class='heading'>Проба1</h2><ul><li>INFO</li></ul></div>
<div id='dqsno'><div class='extra_heading_blue'>Проба2</div><ul><li>INFO</li></ul></div>
<div id='lqvo'><h2 class='heading'>Проба3</h2></div><ul><li>INFO</li></ul></div>
<div id='dqsno'><div class='extra_heading_blue'>Проба4</div><ul><li>INFO</li></ul></div>
<div id='lqvo'><h2 class='heading'>Проба5</h2><ul><li>INFO</li></ul></div>
<div id='dqsno'><div class='extra_heading_blue'>Проба6</div><ul><li>INFO</li></ul></div>
<div id='lqvo'><h2 class='heading'>Проба7</h2><ul><li>INFO</li></ul></div>
<div id='lqvo'><h2 class='heading'>Проба8</h2><ul><li>INFO</li></ul></div>
 
Уау.

Смисъла на id-тата е да бъдат уникални в страницата. Тотално грешно е да използваш едно и също id 2 пъти.

Смени id с class и тогава продължавай с кодирането.
 
<html>
<link href="style.css" type="text/css" rel="stylesheet">
<body>
<div id="left">

<div class='heading'>
<h2>Проба1</h2>
<ul>
<li>
INFO
</li>
</ul>
</div>

<div class='heading'>
<h2>Проба3</h2>
<ul>
<li>
INFO
</li>
</ul>
</div>

<div class='heading'>
<h2>Проба5</h2>
<ul>
<li>
INFO
</li>
</ul>
</div>


</div>


<div id="right">
<div class='extra_heading_blue'>
<h2>Проба2</h2>

<ul>
<li>
INFO
</li>
</ul>
</div>
<div class='extra_heading_blue'>
<h2>Проба4</h2>

<ul>
<li>
INFO
</li>
</ul>
</div>
<div class='extra_heading_blue'>
<h2>Проба6</h2>

<ul>
<li>
INFO
</li>
</ul>
</div>



</div>

</body>
</html>


#left{
float:left;
}
#right{
float:left;
}
 
Имаш два варианта (поне два ми хрумват в момента)

Вариант 1:

Оставяш си html както ти е сега и след всеки два елемента просто поставяш

HTML: 
12
<br style="clear: borh;" />
34
<br style="clear: borh;" />
56
<br style="clear: borh;" />
.....

Вариант 2

Всяка двойка я поставяш в родителски елемент, който си изчиства float-a по някакъв начин. Тук вариантите са пак два:

Вариант 2.1

HTML: 
<div class="clearfix">
12
</div>
<div class="clearfix">
34
</div>
<div class="clearfix">
56
</div>
....

и CSS към този вариант:

[css].clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }[/css]


Вариант 2.2

HTML: 
<div>
12
<br style="clear: both;" />
</div>
<div>
34
<br style="clear: both;" />
</div>
<div>
56
<br style="clear: both;" />
</div>

този вариант изключително много прилича на Вариант 1, но има леко предимство в това, че не се налага на float-натите елементи да си задават margin отгоре и отдолу, а това може да се зададе на едно единствено място - родителския див. :)


Наистина ако използваш един елемент на няколко места вече не е уникален и трябва да смениш id на class. По принцип и така както си го направил би трябвало да работи, но не е правилно.
 
Не мога да се оправя. Колоните излизат една до друга, така както трябва, но когато напиша нещо в дясната колона примерно - то и лявата се разтяга, въпреки, че в нея няма нищо. Демек едната е зависима от другата, ако в лявата колона напиша нещо - то до нея тази в дясно, въпреки, че няма нищо се разтега и тя. Ако може един примерен код примерно, но да няма тези проблеми ще съм много благодарен.
Благодяря предварително!
 
Нормално е така да се получава. По принцип кода, който ти дадох е точно това. Ако съм те разбрал правилно ти искаш нещо подобно на това:


[css].box {
width: 430px;
}

.container-left { float: left; }
.container-right { float: right; }[/css]

HTML: 
<div class="container-left">

	<div class="box">
		1
	</div> 
		
	<div class="box">
		3
	</div> 
		
	<div class="box">
		5
	</div> 

</div> 
	
<div class="container-right">

	<div class="box">
		2
	</div> 
		
	<div class="box">
		4
	</div> 
		
	<div class="box">
		6
	</div> 

</div> 
	
<br class="clear" />

Като разбира се общия сбор от width, padding-left, padding-right, margin-left и margin-right на container-left и container-right не трябва да превишава широчината на родителския им елемент, иначе ще се получи разместване.

Демо на горния код (с малко украса де) можеш да видиш тук:
http://jsfiddle.net/a7zSN/1/
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе