clear:both; Към точно спецялн елемент ?

K

kulov

Registered
Здравейте, това което искам да направя е една сепцялна кутийка да се влияе само от една друга спецялна кутийка, и по-точно имам 2 реда с кутийки, на първият ред имам 3 и на вторият ред имам 3, както можете да педположите, ако сложа clear:both; след първият ред, всички елементи на вторият ред, ще се влиаят от всеки един елемент на първият ред, а аз искам да речем първата кутийка на вторият ред да се влияе само от първата кутийка на първият ред.. Предполагам, че не сте ме разбрали добре, затова ще дам една схемичка ..


e2829d3cda76cd3c.png


Така, тези, които са свързани със стрелки, те да се влиаят едно от друго, примерно, ако втората кутийка на първият ред, стане по-дълга, от нея да се влияе само втората кутийка на вторият ред..

Първият ред е в един общ див (row1) а вторият в общ див (row2)
 
Вместо два реда row1 и row2 ще имаш 3 колони:
#col1, #col2, #col3 { width: 200px; float: left; }
Увеличете...
<div id="col1">
тук слагаш първата кутийка от първи ред
под нея първата кутийка от втори ред
</div>
<div id="col2">
тук слагаш втората кутийка от първи ред
под нея втората кутийка от втори ред
</div>
<div id="col3">
тук слагаш третата кутийка от първи ред
под нея третата кутийка от втори ред
</div>
<div style="clear: both;"></div>
Увеличете...

С числото в червено определяш колко да са ти широки колоните. Може също да си зададеш маргини, за да не са залепени, но това вече е лесно.

Можеш вместо с div, да изчистваш float-а и с <br style="clear: both;" />, в някои случаи дори фиксва бъгове br
 
@adrian Така точно мисля, че няма да стане, всяка кутийка ще ми е отделен див, тей като височината и ширината не са им еднакви, в случая ти както си го дал, пак така се получава смисъл един ред с 3 колони и послед отдоло пак трябва да направя същотото, както аз съм си го направил тук, явно това, което трябва да се направи е следното

Имам 6 кутийки, трябва да ги кодирам две по две, тоест една кутийка, и под нея друга кутийка и така 3 пъти .. така ще стане както на картинката, която съм дал, но няма да са кодирани ред по ред, ами колона по колона..

И тук идва въпроса по какъв начин да ги кодирам.. да речем един общ див за всички редове и колони, на който ще му задам 980px; (Толкова ми е широк дизайна) и след това всяка колона, ще е пак в един общ див, на който ще му се зададе float:left; и там ще има две кутийки, като след първата ще има clear:both; и така ще се повтарят 3 пъти.. Ако някой има по-добра идея как да стане.. слушам :)
 
Добре, направих го така, както написах по-горе, но изникна проблем, тей като аз ползвам jquery и по-точно sortable за да мога да размествам кутийките. В случая могат да си разместват местата кутийките по колоните, тоест в първата колона ако имам в кутийки, те могат да си променят местата, и ето тук идва проблема, нали кутийките не трябва да са слепени една за друга, и ако добая margin-top:50px; на долната кутийка, всичко е ок, нали мърда надоло с 50 пиксела както искам, но се сещате, че ако измърдам долната кутийка отгоре тези 50 пиксела утиват отгоре, където не ми трябват и пак се слепят кутийките .. Някакви идеи как да го направя ?
 
Аз съм написал как да стане. В твоя случай щом цялото съдържание ти е 980px, значи това 200px което съм го написал трябва да 980/3=267px. Или ако искаш и маргини да има между тях ще трябва да си го изчиславаш допълнително.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#col1, #col2, #col3 { border: 1px solid red; width: 267px; float: left; }
#col11, #col21, #col31 { background: #000000; color: #FFFFFF; }
#col12, #col22, #col32 { background: #DDDDDD; color: #000000; }
</style>
</head>
<body>
<div id="col1">
<div id="col11">Ред 1, Колона 1<br /><br /><br /><br /><br /></div>
<div id="col12">Ред 1, Колона 2<br /></div>
</div>
<div id="col2">
<div id="col21">Ред 2, Колона 1<br /></div>
<div id="col22">Ред 2, Колона 2<br /></div>
</div>
<div id="col3">
<div id="col31">Ред 3, Колона 1<br /></div>
<div id="col32">Ред 3, Колона 2<br /></div>
</div>
<div style="clear: both;"></div>
</body>
</html>
Увеличете...
 
Вместо да слагаш margin-top на едната кутийка - сложи margin-bottom и на двете.
 
adrian каза:
Вместо да слагаш margin-top на едната кутийка - сложи margin-bottom и на двете.
Увеличете...

Мерси, точно това ми трябваше .. За момента ще оставя темата отворена, ако изникне нещо при кодирането, за да не отварям втора, иначе имаш +1 от мен :?:
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе