CSS: العناصر المتداخلة دون عرض صريح ولف الكلمات

Question

أحاول وضع تعليق أسفل صورة دون معرفة صريحة بعرض الصور. أود أن تمتد التسمية التوضيحية إلى عرض الصورة الكاملة ، ولكن ليس لتمديد Witdh عناصر الوالدين ولف الخطوط بدلاً من ذلك.

أرغب في تجنب استخدام JavaScript (القراءة والتطبيق على العروض على العناصر) أو استخدام Max-Width: 123px لأن نطاق العروض الممكنة كبيرة.

يبدو الرمز حاليًا شيئًا كهذا ، ولكن يمكن تغييره بحرية. عرض الصورة غير معروف ، ولكن يقتصر على أقصى البعد.

<div style="float:right; width:auto;">  
  <img src="http://" \>
  <div style="clear:right; min-width:100px; max-width:200px; word-wrap:break-word;">
    My caption which can be longer then the image above and should wrap, I do not want to use max-width.
  </div>
</div>

أي اقتراحات مرحب بها.

Answer 1

أولاً ، أخرج الأنماط من HTML ؛ تلك تنتمي إلى CSS.

بعد ذلك ، أعتقد أن ما يمكنك فعله هو تعيين موقع Div على "النسبي" ، ولكن اترك عرضه للسيارات وتدفقه إلى "مخفي". يجب أن يجبرها الإعداد المخفي على أن تكون كبيرة بما يكفي لجميع عناصرها الفرعية.

التسمية التوضيحية ، ثم قمت بتعيين الموضع: Auto ، والسفلي: 0 ، اليسار: 0 ، العرض: 100 ٪.

يجب أن ينجز ما تبحث عنه.

Answer 2

يمكنك ضبط عرض التسمية التوضيحية على بعض ٪ من الوالدين.

أي إذا كان الوالد (x) px واسعًا (بسبب الصورة الموجودة داخلها ، مما يسبب ذلك على نطاق واسع) ، فيمكن ضبط عرض مربع التسمية التوضيحية على بعض ٪ (العرض: 100 ٪ ؛ ربما).