সকল - কিভাবে html তৈরি করা যায়




কিভাবে DIV তার বিষয়বস্তু চেয়ে বড় না? (20)

আপনার প্রশ্নের উত্তর ভবিষ্যতে আমার বন্ধু ...

যেমন "অন্তর্নিহিত" সর্বশেষ CSS3 আপডেট সঙ্গে আসছে

width: intrinsic;

দুর্ভাগ্যক্রমে IE এটির পিছনে রয়েছে তাই এটি এখনও এটি সমর্থন করে না

এটি সম্পর্কে আরো কিছু: সিএসএস অভ্যন্তরীণ এবং বহিরাগত আকার মডিউল স্তর 3 এবং আমি ব্যবহার করতে পারি? : অন্তর্নিহিত & বহিরাগত আকার

এখন আপনার <span> বা <div> সেট থেকে সন্তুষ্ট থাকতে হবে

display: inline-block;

আমি অনুরূপ একটি বিন্যাস আছে:

<div>
    <table>
    </table>
</div>

আমি div আমার table হয়ে শুধুমাত্র বিস্তৃত প্রসারিত চাই।


আপনার যদি লাইন ভাঙ্গার পাত্রে থাকে, কয়েকটি সিএসএস সমাধান খোঁজার জন্য এবং কোনটি খোঁজার পরে, আমি এখন পরিবর্তে jQuery ব্যবহার করি:

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});
nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>


আপনি @ user473598 হিসাবে inline-block ব্যবহার করতে পারেন, তবে পুরোনো ব্রাউজারগুলির থেকে সতর্ক হোন ..

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

মোজিলা সব সময়ে ইনলাইন-ব্লককে সমর্থন করে না, তবে তাদের -moz-inline-stack যা প্রায় একই

inline-block ডিসপ্লে অ্যাট্রিবিউটের কাছাকাছি কিছু ক্রস ব্রাউজার: https://css-tricks.com/snippets/css/cross-browser-inline-block/

আপনি এই বৈশিষ্ট্যটির সাথে কিছু পরীক্ষা দেখতে পারেন: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/


আপনি একটি ব্লক উপাদান চান যা সিএসএস সংকীর্ণ-থেকে-উপযুক্ত প্রস্থে থাকে এবং স্পেস এমন জিনিস পেতে একটি সুখী উপায় সরবরাহ করে না। সিএসএস 2 তে, সঙ্কুচিত করার যোগ্য একটি লক্ষ্য নয়, তবে এমন একটি পরিস্থিতির সাথে মোকাবিলা করার উপায় যেখানে ব্রাউজারটি "পাতলা বায়ু থেকে প্রস্থ" পেতে পারে। যারা পরিস্থিতিতে হয়:

  • ভাসা
  • একেবারে স্থান উপাদান
  • ইনলাইন ব্লক উপাদান
  • টেবিল উপাদান

যখন কোন প্রস্থ নির্দিষ্ট করা হয়। আমি শুনেছি তারা CSS3 এ যা চান তা যোগ করার কথা। এখন জন্য, উপরের একটি দিয়ে কাজ করতে।

সরাসরি বৈশিষ্ট্য প্রকাশ করা না সিদ্ধান্ত অদ্ভুত মনে হতে পারে, কিন্তু একটি ভাল কারণ আছে। এটা দামী. সঙ্কুচিত-টু-ফিট মানে অন্তত দুবার ফর্ম্যাট করা: আপনি তার প্রস্থটি জানেন না হওয়া পর্যন্ত আপনি একটি উপাদান ফর্ম্যাটিং শুরু করতে পারবেন না, এবং আপনি পুরো সামগ্রীটি দিয়ে প্রস্থ / ওজন গণনা করতে পারবেন না। প্লাস, এক হিসাবে চিন্তা করতে পারেন হিসাবে প্রায়ই সঙ্কুচিত-থেকে-উপযুক্ত উপাদান প্রয়োজন হয় না। আপনি আপনার টেবিলের চারপাশে অতিরিক্ত div প্রয়োজন কেন? হয়তো টেবিল ক্যাপশন আপনি প্রয়োজন হয়।


আমরা div উপাদান দুটি উপায়ে ব্যবহার করতে পারেন:

display: table;

বা,

display: inline-block; 

আমি display: table; ব্যবহার করতে পছন্দ করি display: table; , কারণ এটি হ্যান্ডলগুলি, তার নিজস্ব সব অতিরিক্ত স্পেস। display: inline-block সময় display: inline-block কিছু অতিরিক্ত স্থান ফিক্সিং প্রয়োজন।


আমার CSS3 ফ্লেক্সবক্স সমাধান দুটি স্বাদে: শীর্ষস্থানে একটি স্প্যান্যান্টের মত আচরণ করে এবং নীচের দিকে একটি অংশটি ডিভির মতো আচরণ করে, একটি প্রচ্ছদের সাহায্যে সমস্ত প্রস্থ গ্রহণ করে। তাদের ক্লাস যথাক্রমে "শীর্ষ", "নীচে" এবং "bottomwrapper" হয়।

body {
    font-family: sans-serif;
}
.top {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.top, .bottom {
    background-color: #3F3;
    border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
    display: -webkit-flex;
    display: flex;
}
table {
    border-collapse: collapse;
}
table, th, td {
    width: 280px;
    border: 1px solid #666;
}
th {
    background-color: #282;
    color: #FFF;
}
td {
    color: #444;
}
th, td {
    padding: 0 4px 0 4px;
}
Is this
<div class="top">
	<table>
        <tr>
            <th>OS</th>
            <th>Version</th> 
        </tr>
        <tr>
            <td>OpenBSD</td>
            <td>5.7</td> 
        </tr>
        <tr>
            <td>Windows</td>
            <td>Please upgrade to 10!</td> 
        </tr>
    </table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
    <div class="bottom">
    	<table>
            <tr>
                <th>OS</th>
                <th>Version</th> 
            </tr>
            <tr>
                <td>OpenBSD</td>
                <td>5.7</td> 
            </tr>
            <tr>
                <td>Windows</td>
                <td>Please upgrade to 10!</td> 
            </tr>
        </table>
    </div>
</div>
this is what you are looking for.


আমি div.classname{display:table-cell;} চেষ্টা div.classname{display:table-cell;} এবং এটি কাজ করে!


আমি span ট্যাগের ভিতরে একটি span ট্যাগ যুক্ত করে একই রকম সমস্যা সমাধান করেছি (যেখানে আমি display: inline-block ব্যবহার করতে চাইনি display: inline-block কারণ আইটেমটি কেন্দ্রীভূত ছিল) এবং বাইরের div থেকে নতুন অভ্যন্তরীণে সিএসএস ফর্ম্যাটিংটি সরাতে span ট্যাগ। display: inline block হলে অন্য বিকল্প ধারণা হিসাবে এটি নিক্ষেপ করুন display: inline block আপনার জন্য উপযুক্ত উত্তর নয়।


আমি শুধু padding: -whateverYouWantpx; সেট করা হবে padding: -whateverYouWantpx; যাই হোক আপনি padding: -whateverYouWantpx;


এই প্রেক্ষাপটে কোন প্রেক্ষিতে জানা নেই, তবে আমি বিশ্বাস করি সিএসএস-স্টাইলের সম্পত্তিটি left বা right left float কার্যকর হবে। অন্যদিকে, এটির পাশাপাশি অন্যান্য পার্শ্ব প্রতিক্রিয়া থাকবে, যেমন পাঠ্যটিকে তার চারপাশে ভাসতে দেওয়া।

যদিও আমি ভুল না হলে আমাকে সংশোধন করুন, আমি 100% নিশ্চিত নই, এবং বর্তমানে এটি নিজে পরীক্ষা করতে পারছি না।


একটি CSS2 সামঞ্জস্যপূর্ণ সমাধান ব্যবহার করা হয়:

.my-div
{
    min-width: 100px;
}

আপনি আপনার clearfix ফ্লোট করতে পারেন যা এটি যতটা সম্ভব ছোট হিসাবে কার্যকর করবে তবে আপনার clearfix ভেতরের যেকোনো কিছু ভাসমান হলে আপনাকে একটি clearfix ব্যবহার করতে হবে:

.my-div
{
    float: left;
}

একটি কাজ ডেমো এখানে-

.floating-box {
    display:-moz-inline-stack;
    display: inline-block;

    width: fit-content; 
    height: fit-content;

    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}
<h2>The Way is using inline-block</h2>

Supporting elements are also added in CSS.

<div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
</div>


শুধু আপনার সিএসএস ফাইল একটি শৈলী রাখুন

div { 
    width: fit-content; 
}

সংশোধিত (আপনার একাধিক সন্তান থাকলে কাজ করে): আপনি jQuery ব্যবহার করতে পারেন (JSFiddle লিঙ্কটি দেখুন)

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

JQuery অন্তর্ভুক্ত করতে ভুলবেন না ...

এখানে JSfiddle দেখুন


-moz-fit-content সাথে প্রায় -moz-fit-content আমি সম্পত্তি মান -moz-fit-content খুঁজে পেয়েছি যা ঠিক -moz-fit-content যা চায় তা অনুসরণ করে এবং অনুসরণ হিসাবে ব্যবহার করা যেতে পারে:

width: -moz-fit-content;

যদিও এটি শুধুমাত্র ফায়ারফক্সে কাজ করে তবে আমি Chrome এর মতো অন্যান্য ব্রাউজারের জন্য সমতুল্য নই।


display: inline-block; চেষ্টা করুন display: inline-block; । এটি ক্রস ব্রাউজার সামঞ্জস্যপূর্ণ জন্য নীচের CSS কোড ব্যবহার করুন।

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}
<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>


ঠিক আছে, বেশিরভাগ ক্ষেত্রে আপনাকে ডিফল্ট ডিভ হিসাবে স্বয়ং কিছু হিসাবে কিছু করার দরকার নেই, এটি স্বয়ংক্রিয়ভাবে height এবং width হিসাবে থাকে তবে যদি আপনার কেস না থাকে তবে inline-block ডিসপ্লে প্রয়োগ করা আপনার জন্য কাজ করবে ... আমি তৈরি কোডটি দেখ আপনার জন্য এবং এটি আপনি যা খুঁজছেন তা করুন:

div {
  display: inline-block;
}
<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>


div{
  width:auto;
  height:auto;
}

<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

এটি পিতার DIV প্রস্থকে বৃহত্তম উপাদান প্রস্থ হিসাবে একই করে তুলবে।


<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>

    <div id="content_lalala">
        this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
    </div>

</td>
</tr>
</table>

আমি কখনও কখনও টেবিল পছন্দ করি না জানি, তবে আমি আপনাকে বলতে চাই, আমি CSS ইনলাইন হ্যাকগুলি চেষ্টা করেছি, এবং তারা কিছু divs মধ্যে কাজ করেছে, কিন্তু অন্যদের মধ্যে না, তাই, সম্প্রসারিত ডিভিটি বন্ধ করা সত্যিই সত্যিই সহজ ছিল একটি টেবিল ... এবং ... এটি ইনলাইন সম্পত্তি থাকতে পারে না এবং এখনও টেবিলটি সামগ্রীর সামগ্রিক প্রস্থ ধরে রাখতে পারে। =)





width