আপনি কীভাবে ডিভ উপাদানগুলি ইনলাইন প্রদর্শন করেন?

Question

এই এইচটিএমএল দেওয়া হয়েছে:

<div>foo</div><div>bar</div><div>baz</div>

আপনি কীভাবে এগুলিকে এভাবে ইনলাইন প্রদর্শন করবেন:

foo বার বাজ

এটার মত না:

foo
বার
বাজ

Answer 1

এটি তখন অন্য কিছু:

div.inline { float:left; }
.clearBoth { clear:both; }

<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->

Comments

প্রকৃতপক্ষে এটিই কেবলমাত্র আমি

— ইনলাইনটি

এখানে সিএসএস শ্রেণির নামগুলি উদাহরণ হিসাবে ব্যবহার করা উচিত নয়। যথাযথ অর্থসূচক

— ক্লাস-

Answer 2

একটি ইনলাইন ডিভ হ'ল ওয়েবে একটি ফ্রিক এবং এটি স্প্যান না হওয়া পর্যন্ত মারধর করা উচিত (10 এর মধ্যে কমপক্ষে 9 বার) ...

<span>foo</span>
<span>bar</span>
<span>baz</span>

... মূল প্রশ্নের উত্তর ...

Comments

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

— ড্যারিল হেইন

প্যাডিং হ্যাঁ, মার্জিন নয়

— অ্যান্ড্রেস ওয়াং

দুর্ভাগ্যক্রমে, এইচটিএমএল 5 <span> এর মধ্যে একটি ডিভিশন স্থাপন সমর্থন করে না। আমি একটি বিভাগে সিএসএস শৈলীগুলি রাখার জন্য <span> s ব্যবহার করতাম এবং ব্রাউজারটি বিভাগটিকে একটি ব্লক হিসাবে ব্যাখ্যা না করে এবং এর ব্লক বিন্যাসটি আমার উপর চাপিয়ে দেয়। তবে আমি আজই আমার পৃষ্ঠাটি JQuery মোবাইল + এইচটিএমএল 5 এ পোর্ট করার সময় আবিষ্কার করেছি যে আপনি যদি <span> এর মধ্যে <div> থাকেন তবে এইচটিএমএল 5 বৈধকারক অভিযোগ করবে যে এটি অবৈধ এইচটিএমএল 5 তাই এর পরিবর্তে <span> ট্যাগ ব্যবহার করার ক্ষেত্রে এমন ঘটনা রয়েছে cases কমপক্ষে HTML5 সহ একটি ইনলাইন <ডিভিটি> কার্যকর হয় না।

— Kmeixner

কখনও কখনও আপনি এমন একটি পৃথিবীতে বাস করছেন যদিও আপনি তৈরি করেননি এবং সিএসএসে আপনি কেবলমাত্র পরিবর্তন করতে পারেন। সেক্ষেত্রে স্টাইল = "প্রদর্শন: ইনলাইন" দুর্দান্তভাবে কাজ করে।

— ম্যাথু লক

আপনি যদি ডিভ ব্যবহার করে 'আটকে না' থাকেন তবে এটি একটি ভাল উত্তর। তবে আপনাকে ডিভগুলি ব্যবহার করার প্রয়োজন থাকলেও ইনলাইন উপাদান হিসাবে উপস্থিত হওয়ার প্রয়োজন রয়েছে এমন অনেকগুলি কারণ থাকতে পারে।

— ববললে

Answer 3

এটি লেখার চেষ্টা করুন:

div { border: 1px solid #CCC; }

    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>

Comments

এটি প্রশ্নের সঠিক উত্তর, তবে গৃহীত উত্তর বিবেচনা করে আমার সন্দেহ হয় যে প্রশ্নটি সত্যিকারের দৃশ্যের দিকে নজর দেয় না।

— স্টিভ Perks 16

Answer 4

এই প্রশ্নটি এবং উত্তরগুলি বেশ কয়েকবার পড়ার পরে আমি কেবল এটিই করতে পারি যে সম্পাদনা বেশ কিছুটা চলছিল, এবং আমার সন্দেহ হ'ল পর্যাপ্ত তথ্য না দেওয়ার ভিত্তিতে আপনাকে ভুল উত্তর দেওয়া হয়েছে। আমার ক্লু brট্যাগ ব্যবহার থেকে আসে ।

ড্যারিলের কাছে ক্ষমা চাইছি। আমি ক্লাস = "ইনলাইন" স্টাইল হিসাবে = "প্রদর্শন: ইনলাইন" পড়ি। আপনার কাছে সঠিক উত্তর রয়েছে, এমনকি যদি আপনি শব্দার্থবিজ্ঞানযুক্ত প্রশ্নযুক্ত শ্রেণির নাম ব্যবহার করেন ;-)

brপাঠ্য বিন্যাসের চেয়ে স্ট্রাকচারাল লেআউট সরবরাহের মিস ব্যবহারটি আমার পছন্দ অনুসারে খুব বেশি প্রচলিত।

যদি আপনি সেগুলির মধ্যে ইনলাইন উপাদানগুলির চেয়ে আরও বেশি divsকিছু রাখতে চান তবে আপনার divসেগুলি ইনলাইন না করে বরং ভাসমান ।

ভাসমান ডিভ:

===== ======= ==   **** ***** ******   +++++ ++++
===== ==== =====   ******** ***** **   ++ +++++++
=== ======== ===   ******* **** ****   
===== ==== =====                       +++++++ ++
====== == ======

ইনলাইন ডিভ:

====== ==== ===== ===== == ==== *** ******* ***** ***** 
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++

যদি আপনি পূর্বের পরে থাকেন তবে এটি আপনার সমাধান এবং সেই brট্যাগগুলি হারাবেন :

<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>

মনে রাখবেন যে এই ডিভগুলির প্রস্থটি তরল, সুতরাং যদি আপনি আচরণটি নিয়ন্ত্রণ করতে চান তবে এগুলিতে প্রস্থগুলি নির্দ্বিধায় ফেলুন।

ধন্যবাদ, স্টিভ

Answer 5

display:inline-blockআইই 6/7 এর জন্য একটি মার্জিন এবং মিডিয়া ক্যোয়ারী সহ ব্যবহার করুন :

<html>
  <head>
    <style>
      div { display:inline-block; }
      /* IE6-7 */
      @media,
          {
          div { display: inline; margin-right:10px; }
          }
   </style>
  </head>
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</html>

Answer 6

সঠিকভাবে ইনলাইন করার <span>পরিবর্তে আপনার ব্যবহার করা উচিত । কারণ ডিভ একটি ব্লক স্তর উপাদান, এবং আপনার প্রয়োজনীয়তা ইনলাইন-ব্লক স্তর উপাদানগুলির জন্য।<div>

আপনার প্রয়োজনীয়তা অনুসারে এখানে এইচটিএমএল কোড রয়েছে:

<div class="main-div">
 <div>foo</div>
 <div>bar</div>
 <div>baz</div>`
</div>

এটি করার জন্য আপনার দুটি উপায় আছে

---

• সহজ ব্যবহার display:inline-block;
• বা ব্যবহার float:left;

সুতরাং আপনি display:inline-block;বাধ্যতামূলকভাবে প্রদর্শন সম্পত্তি পরিবর্তন করতে হবে

একটি উদাহরণ

div {
    display: inline-block;
}

উদাহরণ দুটি

div {
    float: left;
}

আপনার ভাসা সাফ করা দরকার

.main-div:after {
    content: "";
    clear: both;
    display: table;
}

Answer 7

উল্লিখিত হিসাবে, প্রদর্শন: ইনলাইন সম্ভবত আপনি যা চান তা হ'ল। কিছু ব্রাউজার ইনলাইন-ব্লকগুলিকে সমর্থন করে।

http://www.quirksmode.org/css/display.html#inlineblock

Comments

@ নেেক্সাসআরেক্সের আইই সঠিকভাবে আচরণ করার জন্য কাজ করার চেষ্টা রয়েছে তবে প্রদর্শন করুন: ইনলাইনটি সঠিক উত্তর। আমি বিশ্বাস করি চারপাশের কাজটি হ'ল: প্রদর্শন: ইনলাইন-ব্লক; * প্রদর্শন: ইনলাইন; * জুম: 1; জুম সেট করা আইইকে উপাদানটিকে একটি ব্লক উপাদানের মতো আচরণ করতে বাধ্য করে।

— ক্রিস স্টিফেন্স

Answer 8

কেবল "ফ্লোট: বাম" দিয়ে একটি মোড়ক ডিভি ব্যবহার করুন এবং ভিতরে ফ্লোট: বাম সহ বাক্সগুলি রাখুন

সিএসএস:

wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}

.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}

এইচটিএমএল:

<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>

Answer 9

<span> ?

Comments

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

— NexusRex

Answer 10

আমার জন্য ঠিক আছে :

<style type="text/css">
    div{
        position: relative;
        display: inline-block;
        width:25px;
        height:25px;
    }
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>

Answer 11

আমি স্প্যান ব্যবহার করব বা ডিভিটি বামে ভেসে উঠব। ভাসমান ক্ষেত্রে একমাত্র সমস্যাটি হ'ল এরপরে আপনাকে ফ্লোটটি সাফ করতে হবে বা উপস্থিত ডিভের ওভারফ্লো স্টাইলটি স্বয়ংক্রিয়ভাবে সেট করা থাকতে হবে

Comments

আমি বিশ্বাস করি আমরা পাঠ্য বা অন্য সাথে একটি ডিভ ইনলাইন সম্পর্কে কথা বলছি, একদিকে ভাসা নয়।

— NexusRex

যখন ভাসা: বাম, ওভারফ্লো সহ: ডিভযুক্ত ডিভাইসে স্বয়ংক্রিয়ভাবে, কখন / কখন যে স্ক্রোলবারটি উপচে পড়বে তা কার্যকর হবে?

— cellepo

Answer 12

আমি জানি লোকেরা এটি একটি ভয়ানক ধারণা, তবে আপনি যদি নীচে মন্তব্য সহ টাইল ইমেজের মতো কিছু করতে চান তবে এটি ব্যবহারিকভাবে কার্যকর হতে পারে। যেমন পিকাসাভেব এটি অ্যালবামের থাম্বনেইলগুলি প্রদর্শন করতে ব্যবহার করে।
উদাহরণস্বরূপ / ডেমো দেখুন http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (ক্লাস GOOG-ইনলাইন-ব্লক; আমি এটা সংক্ষিপ্ত এখানে আইবি) এর

/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }

সিএসএস দেওয়া, আপনার ডিভটি ক্লাস আইবিতে সেট করুন এবং এখন এটি যাদুতে একটি ইনলাইন ব্লক উপাদান।

Answer 13

আপনার তিনটি ডিভ থাকা দরকার। এখানে একটি উদাহরণ:

সিএসএস

div.contain
{
  margin:3%;
  border: none;
  height: auto;
  width: auto;
  float: left;
}

div.contain div
{
  display:inline;
  width:200px;
  height:300px;
  padding: 15px;
  margin: auto;
  border:1px solid red;
  background-color:#fffff7;
  -moz-border-radius:25px; /* Firefox */
  border-radius:25px;
}

দ্রষ্টব্য: সীমানা ব্যাসার্ধ বৈশিষ্ট্যগুলি optionচ্ছিক এবং কেবল CSS3 অনুবর্তী ব্রাউজারগুলিতে কাজ করে।

এইচটিএমএল

<div class="contain">
  <div>Foo</div>
</div>

<div class="contain">
  <div>Bar</div>
</div>

<div class="contain">
  <div>Baz</div>
</div>

মনে রাখবেন যে ডিভগুলি 'ফু' 'বার' এবং 'বাজ' প্রতিটি 'কন্টেন্ট' ডিভের মধ্যে রাখা হয়।

Answer 14

<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>

Answer 15

আমি মনে করি আপনি কোনও CSS ব্যবহার না করে এইভাবে ব্যবহার করতে পারবেন -

<table>
    <tr>
        <td>foo</td>
    </tr>
    <tr>
        <td>bar</td>
    </tr>
    <tr>
        <td>baz</td>
    </tr>
</table>

এখনই আপনি ব্লক স্তরের উপাদানটি ব্যবহার করছেন যাতে আপনি অযাচিত ফলাফল পাচ্ছেন getting সুতরাং আপনি স্প্যান, ছোট ইত্যাদির মতো উপাদানগুলিকে ইনলাইন করতে পারেন

<span>foo</span><span>bar</span><span>baz</span>

Answer 16

আমরা এই মত করতে পারেন

.left {
    float:left;
    margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>

Answer 17

<div class="cdiv">
<div class="inline"><p>para 1</p></div>
 <div class="inline">
     <p>para 1</p>
     <span>para 2</span>
     <h1>para 3</h1>
</div>
 <div class="inline"><p>para 1</p></div>

http://jsfiddle.net/f8L0y5wx/

Answer 18

<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
    #div01, #div02, #div03 {
                                float:left;
                                width:2%;
    }   
 </style>
 <div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 //solution 2

 <style>
      #div01, #div02, #div03 {
                                  display:inline;
                                  padding-left:5px;
      }   
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 /* I think this would help but if you have any other thoughts just let me knw      kk */

Answer 19

আমি কেবল তাদের নির্দিষ্ট প্রস্থ তৈরি করার প্রবণতা রাখছি যাতে তারা পৃষ্ঠার মোট প্রস্থে যোগ করে - আপনি কেবলমাত্র একটি নির্দিষ্ট প্রস্থ পৃষ্ঠা ব্যবহার করছেন যদি সম্ভবত কাজ করে। এছাড়াও "ভাসা"।