এইচটিএমএল / সিএসএস ব্যবহার করে কোনও চিত্রের চারপাশে কীভাবে পাঠ্য মোড়া করতে হয়

Question

আমি নীচের ছবির মতো পাঠ্যের একটি ব্লক ডিজাইন করতে চাই:

প্রশ্ন করা সম্ভব কিনা?

Comments

ইন্ডেন্টেশন এবং ন্যায্যতা সহ একটি চিত্রের চারপাশে মোড়ানো

— রেকর্ডের

আপনি কি নিয়মিত <p>ট্যাগ ইত্যাদির মতো কোনও চিত্রের চারপাশে পাঠ্য মোড়ানোর চেষ্টা করছেন , তবে আপনি এটিও উল্লেখ করেছেন <textarea>, যা সম্পূর্ণ ভিন্ন সমস্যা হতে পারে। আপনার কিছু থাকলে আপনি আপনার HTML পোস্ট করেন না কেন? ধন্যবাদ.

— মার্ক অডিট

হ্যাঁ, আপনি কেবল বাম দিকে পিএইচপি চিত্রটি ভাসিয়ে তুলতে চাইবেন এবং পাঠ্যটি তার চারপাশে আবৃত করবে :-)

— জ্যাক টাক

এই সমস্ত মন্তব্য এবং কোনও গৃহীত উত্তর নেই ...

— ডেভ ক্যান্টার

Answer 1

আপনি করতে হবে floatনিম্নরূপ আপনার ইমেজ ধারক:

এইচটিএমএল

<div id="container">
    <div id="floated">...some other random text</div>
    ...
    some random text
    ...
</div>

সিএসএস

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

বেহালা

http://jsfiddle.net/kYDgL/

Answer 2

সঙ্গে CSS এর আকার আপনি যদি একটি আয়তক্ষেত্রাকার ছবির চারপাশে শুধু ভাসা টেক্সট চেয়ে আরও এক ধাপ যেতে পারেন।

আপনি আসলে পাঠ্য মোড়ানো করতে পারেন এটি আপনার চারপাশে মোড়ানো এমন চিত্র বা বহুভুজটির প্রান্তের আকার নেয়।

ডেমো ফিডল (বর্তমানে ওয়েবকিট - ক্যানিয়াসে কাজ করছে)

.oval {
  width: 400px;
  height: 250px;
  color: #111;
  border-radius: 50%;
  text-align: center;
  font-size: 90px;
  float: left;
  shape-outside: ellipse();
  padding: 10px;
  background-color: MediumPurple;
  background-clip: content-box;
}
span {
  padding-top: 70px;
  display: inline-block;
}

<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

এছাড়াও, সিএসএস আকারগুলিতে নিখরচায় একটি ভাল তালিকা is

Comments

কীভাবে "আড়ম্বর" বস্তুকে মাঝখানে রাখতে পারে এমন কোনও বিকল্প রয়েছে?

— পুনঃনির্দেশ

: আমার পোস্টে সিএসএস exclusions.See খুঁজে বার করো @redestructa stackoverflow.com/a/19895616/703717 এটি বর্তমানে শুধুমাত্র আই ই সমর্থিত হয়েছে - caniuse.com/#feat=css-exclusions

— Danield

Answer 3

BeNdErR এর উত্তরে সংযোজন :
"অন্যান্য পাঠ্য " উপাদানটির মতো হওয়া উচিত float:none:

    <div style="width:100%;">
        <div style="float:left;width:30%; background:red;">...something something something  random text</div>
        <div style="float:none; background:yellow;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
    </div>

Comments

এটিই কেবলমাত্র এটিই কাজ করতে পেতাম .. এবং পরিষ্কার সমাধান।

— andygoestohलीवुड

ভাসা: আমাকে রক্ষা করার মতো কিছুই ছিল না! ভেসে যাওয়ার চেষ্টা করা হয়েছে: দ্বিতীয় উপাদানটি কোনও কাজে আসেনি।

— bkunzi01

Answer 4

যদি চিত্রটির আকার পরিবর্তনশীল হয় বা নকশাটি প্রতিক্রিয়াশীল হয় তবে পাঠ্য মোড়ানো ছাড়াও, আপনি অনুচ্ছেদটি খুব সংকীর্ণ না হওয়ার জন্য একটি মিনিটের প্রস্থ সেট করতে পারেন ।
পছন্দসই সর্বনিম্ন অনুচ্ছেদের প্রস্থের সাথে একটি অদৃশ্য সিএসএস সিউডো-উপাদান দিন। যদি এই ছদ্ম-উপাদানটি ফিট করার মতো পর্যাপ্ত জায়গা না থাকে তবে অনুচ্ছেদটি এটি সহ চিত্রের নীচে নামিয়ে দেওয়া হবে।

#container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Min width required */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

Comments

আমি মনে করি আপনার উত্তর আমাকে কিছু বেকন বাঁচাতে পারে। বাম ভাসমান চিত্রগুলি একটি প্রতিক্রিয়াশীল নকশায় স্ট্যাক আপ করতে আমার একটি সমস্যা ছিল। আমার ডিফল্ট চিত্রের প্রস্থ 30% এবং উভয় পক্ষের চিত্রের সাথে, আমার মাঝে মাঝে কেবল 4 টি অক্ষর প্রস্থের একটি পাঠ্য কলাম থাকতে পারে।

— শেরউড বটসফোর্ড