CSS එකේ float සහ margin එකට එක්විම

දැන් අපගේ පෙළ පින්තූරයට වම් පැත්තෙන් තද කර ඇත. මෙම පෙළ ටිකක් ඉවතට ගෙන යාමට උත්සාහ කරමු. මෙය සිදු කිරීම සඳහා, අපගේ ඡේදවලට වම් margin එක 30px ක් නියම කරන්න, දෙමව්පිය div එකට - රතු මායිමක් දෙන්න.

නො预期වූ ආකාරයට, දෙමව්පිය div එකට යාබදව ඇති පෙළ පමණක් දකුණට ඉවතට යනු ඇත, නමුත් පින්තූරයට යාබදව ඇති පෙළ - ඉවතට නොයනු ඇත:

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

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
}
img {
  float: left;
}

Результат:

මෙය ඇයි සිදුවෙනවා ද යන්න තේරුම් ගැනීමට, ඡේදවලට කොළ මායිමක් එකතු කරමු:

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

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
  border: 1px solid green;
}
img {
  float: left;
}

Результат:

අපට පෙනෙන පරිදි, ඇත්ත වශයෙන්ම ඡේද දෙමව්පිය div එකෙන් වම් මායිමෙන් ඉවතට ගෙන යනු ලැබේ, නමුත් පින්තූරයෙන් නොව. වැඩි විස්තර සඳහා බලමු, අපි පින්තූරයට opacity ගුණාංගය භාවිතා කර තවත් අර්ධ-පාරදෘෂ්‍යතාවයක් එකතු කරමු:

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

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

margin-left වෙත ප්‍රතිචාරයක් ඇති බව අපට දැන් නිසැකවම දැක ගත හැකිය, නමුත් ඡේද ඇත්ත වශයෙන්ම පින්තූරය යට තබා ඇත. අපි margin එක ඉවත් කර, පින්තූරයේ අර්ධ-පාරදෘෂ්‍යතාවය තබා ගනිමු:

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

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

Результат:

අපගේ ඡේද සැබවින්ම පෙනෙන්නේ මේ වගේ ය - ඒවායේ පෙළ පින්තූරයෙන් ඉවතට ගෙන යනු ලැබුවද, භෞතිකව ඡේද පින්තූරය යට පිහිටා ඇත, මායිම දෙමව්පිය div එකේ වම් මායිමෙන් ආරම්භ වන බව දැකිය හැකිය.

අපි margin එක ආපසු ගෙන ඒම සහ පින්තූරය පළමු ඡේදය තුලට දමමු:

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

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

දැන් පින්තූරය ඡේද සමග එක්ව ගමන් කරයි!