চিত্রের অধীনে পাঠ্য মোড়ানো বন্ধ করতে সিএসএস

Question 1

আমার নিম্নলিখিত মার্কআপ রয়েছে:

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

আমি এটি চাই যাতে পাঠ্য মোড়ানো হয় তবে এটি চিত্রটির জন্য 'কলামে' যায় না। আমি জানি আমি এটির table(যা আমি করছিলাম) দিয়ে এটি করতে পারি তবে এটি এই কারণে কার্যকর হয় না ।

আমি সাফল্য ছাড়াই নিম্নলিখিত চেষ্টা করেছি:

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

আমিও চেষ্টা করেছি float: right।

ধন্যবাদ

সম্পাদনা: আমি এটি দেখতে এটি দেখতে চাই:

IMG   Text starts here and keeps going... and
      wrap starts here.

এটার মত না:

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.

Question 2

যেহেতু এই প্রশ্নটি প্রচুর মতামত লাভ করছে এবং এটিই স্বীকৃত উত্তর ছিল, তাই আমি নিম্নলিখিত দাবি অস্বীকার করার প্রয়োজন অনুভব করেছি:

এই উত্তরটি ওপির প্রশ্নের সাথে নির্দিষ্ট ছিল (উদাহরণগুলির মধ্যে প্রস্থটি সেট ছিল)) এটি কাজ করার সময় এটির প্রতিটি উপাদান, চিত্র এবং অনুচ্ছেদে একটি প্রস্থ থাকা প্রয়োজন। যদি না এটি আপনার প্রয়োজন হয় তবে আমি জো কনলিনের সমাধানটি ব্যবহার করার পরামর্শ দিচ্ছি যা এই প্রশ্নের অন্য উত্তর হিসাবে পোস্ট করা হয়েছে।

spanউপাদান একটি ইনলাইন উপাদান, আপনি সিএসএস এর প্রস্থ পরিবর্তন করতে পারবেন না হয়।

আপনি নীচে সিএসএস আপনার স্প্যানে যুক্ত করতে পারেন যাতে আপনি এর প্রস্থ পরিবর্তন করতে সক্ষম হবেন।

display: block;

অন্য উপায়, যা সাধারণত আরও বোধগম্য হয় তা হ'ল <p>আপনার সন্তানের জন্য পিতামাতা হিসাবে কোনও উপাদান ব্যবহার করা <span>।

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

যেহেতু <p>একটি blockউপাদান, আপনি কোনও পরিবর্তন না করেই সিএসএস ব্যবহার করে এর প্রস্থ নির্ধারণ করতে পারেন।

তবে উভয় ক্ষেত্রেই যেহেতু এখন আপনার একটি ব্লক উপাদান রয়েছে তাই আপনাকে চিত্রটি ভাসা করতে হবে যাতে আপনার পাঠ্যটি সমস্ত আপনার চিত্রের নীচে না যায়।

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

দ্রষ্টব্য পরিবর্তে float:leftছবিতে, এছাড়াও আপনি লাগাতে পারেন float:rightউপর li pকিন্তু সেই ক্ষেত্রে, আপনার কাছে করতে হবে text-align:leftসঠিকভাবে টেক্সট পুনর্নির্মাণ করা হয়।

পিএসএস যদি আপনি কোনও <p>উপাদান যুক্ত না করার প্রথম সমাধানটি নিয়ে এগিয়ে যান তবে আপনার সিএসএসের মতো দেখতে হবে:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}

Question 3

এই সমস্যার জন্য খুব সহজ উত্তর যা মনে হয় প্রচুর লোককে ধরেছে:

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

উদাহরণ দেখুন: http://jsfiddle.net/vandigroup/upKGe/132/

Question 4

যারা কিছু পটভূমি তথ্য চান তাদের জন্য এখানে কেন কাজ করে তা ব্যাখ্যা করার জন্য একটি ছোট্ট নিবন্ধoverflow: hidden । এটি তথাকথিত ব্লক ফর্ম্যাটিং প্রসঙ্গের সাথে করতে হবে । এটি ডাব্লু 3 সি এর অনুচ্ছেদের অংশ (অর্থাত্ হ্যাক নয়) এবং মূলত এই অঞ্চলটি ব্লক-ধরণের প্রবাহ সহ একটি উপাদান দ্বারা দখল করা।

প্রতিবার এটি প্রয়োগ করা হলে overflow: hiddenএকটি নতুন ব্লক বিন্যাসের প্রসঙ্গ তৈরি করে। তবে এই আচরণটি ট্রিগার করতে সক্ষম এমন একমাত্র সম্পত্তি নয়। সিডনি ওয়েব অ্যাপস গ্রুপ থেকে ফিওনা চ্যানের উপস্থাপনাটির উদ্ধৃতি :

ভাসা: বাম / ডান

ওভারফ্লো: লুকানো / অটো / স্ক্রোল

প্রদর্শন: সারণী-ঘর এবং কোনও টেবিল-সম্পর্কিত মান / ইনলাইন-ব্লক

অবস্থান: পরম / স্থির

Question 5

আপনি যদি চান margin-leftএকটি কাজ করার spanউপাদান আপনি এটি করতে করতে হবে display: inline-blockবা display:blockহিসাবে ভাল।

Question 6

পাঠ্যটির display:flexজন্য সেটিংস আমার পক্ষে কাজ করেছিল।

Question 7

চিত্র এবং স্প্যানের চারপাশে একটি ডিভ মোড়ুন এবং সিএসএসে নিম্নলিখিতটি যুক্ত করুন:

এইচটিএমএল

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

সিএসএস

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

কম

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }