Տեքստ ֆլոատների ծնողում CSS-ում
Եկեք հանենք height հատկությունը
div-ի համար և տեղադրենք մի փոքր տեքստ
նկարից առաջ:
Այս դեպքում մեր div-ի բարձրությունը հավասար կլինի տեքստի բարձրությանը, իսկ նկարը կմնա div-ից դուրս:
<div>
տեքստ
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Եկեք տեքստը տեղադրենք նկարից հետո - արդյունքը չի փոխվի.
<div>
<img src="img.png" alt="">
տեքստ
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Եկեք ստիպենք, որ նկարը լողա ձախ եզրով - արդյունքը կլինի նման.
<div>
<img src="img.png" alt="">
տեքստ
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Եկեք ներքևում ավելացնենք ևս մեկ div - նկարը կխփի նաև դրան.
<div>
<img src="img.png" alt="">
տեքստ
</div>
<div>
տեքստ
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Եթե առաջին div-ին ավելացնենք այնքան շատ տեքստ, որ բարձրությամբ այն մեծ լինի նկարից - այն չի խփի երկրորդ div-ին.
<div>
<img src="img.png" alt="">
some long text
</div>
<div>
տեքստ
</div>
div {
text-align: justify;
border: 1px solid red;
}
img {
float: left;
}
:
Այս պահը շատ կարևոր է - մշակման ընթացքում կարող է լինել, որ ինչ-որ բլոկում դուք ունենաք բավականին շատ տեքստ, իսկ հետո կայքի իրական աշխատանքի ժամանակ այս բլոկում կլինի պլանավորվածից ավելի քիչ տեքստ: Կստացվի, որ այս դեպքում կհայտնվի լողացող տարրերի հարևան բլոկների վրա խփելու խնդիրը:
