CSS හි ටැග් යට ඇති පාවෙන අංග

දැන් අපට ඡේද දෙකක් සහ පළමු ඡේදය තුළ තබා ඇති පින්තූරයක් ඇතැයි සිතමු. මෙම පින්තූරය සඳහා අපි float ගුණාංගය right අගයටත්, අර්ධ පාරදෘෂ්‍යතාවයත් සකසා ඇත:

html<div>
  <p>
    <img src="img.png" alt="">
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

දැන් අපි HTML කේතයේ පින්තූරය පළමු ඡේදයට පසුව තබා ප්‍රතිඵලය බලමු:

html<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <img src="img.png" alt="">
  <p>
    some long text
  </p>
</div>

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

අපට දකින්නට ලැබෙන පරිදි, දෙවන ඡේදයේ පෙළ පින්තූරය වටා පැහැදිලි වන නමුත් පළමු ඡේදයේ පෙළ එසේ නොවේ.

දැන් අපි අපේ පින්තූරය දෙවන ඡේදයට පසුව තබමු. මෙම අවස්ථාවේ දී, එය දකුණට පාවන නමුත් කිසිදු පැහැදිලි කිරීමක් සිදු නොවේ:

html<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

එබැවින්, පින්තූරය යට පිහිටා ඇති මූලද්‍රව්‍ය පමණක් එය වටා පැහැදිලි වන අතර ඊට ඉහළින් පිහිටි මූලද්‍රව්‍ය එසේ නොවේ.