সিএসএস প্রদর্শন: প্রস্থটি 100% এ সেট করা থাকলে টেবিল-সারি প্রসারিত হয় না

Question 1

আমার কিছুটা সমস্যা হচ্ছে আমি ফায়ারফক্স 3.6 ব্যবহার করছি এবং নিম্নলিখিত ডোম কাঠামো আছে:

<div class="view-row">
    <div class="view-type">Type</div>
    <div class="view-name">Name</div>                
</div>

এবং নিম্নলিখিত সিএসএস:

.view-row {
width:100%;
display:table-row;
}

.view-name {
display: table-cell;
float:right;
}

.view-type {
display: table-cell;
}

যদি আমি এটিটি বন্ধ করি তবে display:table-rowএটি সঠিকভাবে উপস্থিত হবে, view-rowপ্রস্থটি 100% প্রস্থের সাথে দেখানো হবে। যদি আমি এটি পিছনে রাখি তবে এটি সঙ্কুচিত হয়ে যায়। আমি এটি জেএস বিনের উপরে রেখেছি:

http://jsbin.com/ifiyo

কি হচ্ছে?

Question 2

যদি আপনি display:table-rowইত্যাদি ব্যবহার করে থাকেন তবে আপনার যথাযথ মার্কআপ দরকার, যার মধ্যে একটি টেবিল রয়েছে includes এটি ছাড়া আপনার মূল প্রশ্নটি মূলত এর সমতুল্য খারাপ মার্কআপ সরবরাহ করে:

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</tr>

উপরের টেবিলটি কোথায়? আপনি শুধু দাঁড়াতেই আউট একটি সারি থাকতে পারে না (TR পারেন অন্তর্ভুক্ত করা আবশ্যক table, thead, tbody, ইত্যাদি)

পরিবর্তে, এর সাথে একটি বাহ্যিক উপাদান যুক্ত display:tableকরুন, ধারণকারী উপাদানটিতে 100% প্রস্থ দিন। অভ্যন্তরের দুটি কক্ষ স্বয়ংক্রিয়ভাবে 50/50 হয়ে যাবে এবং দ্বিতীয় কক্ষে ডানদিকে পাঠ্যক্রমটি প্রান্তিক করবে। floatsটেবিলের উপাদানগুলির সাথে ভুলে যান । এটি এত মাথাব্যথার কারণ হবে।

মার্কআপ:

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">Name</div>                
    </div>
</div>

সিএসএস:

.view-table
{
    display:table;
    width:100%;
}
.view-row,
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;
}
.view-name 
{
    text-align:right;
}

Question 3

পরীক্ষিত উত্তর:

.ভিউ-সারি সিএসএসে, পরিবর্তন করুন:

display:table-row;

প্রতি:

display:table

এবং "ভাসা" থেকে মুক্তি পান । প্রত্যাশা অনুযায়ী সবকিছুই কাজ করবে।

মন্তব্যগুলিতে যেমন পরামর্শ দেওয়া হয়েছে, মোড়কের টেবিলের দরকার নেই। সিএসএস গাছের কাঠামোর স্তরগুলিকে বাদ দিতে দেয় (এই ক্ষেত্রে সারিগুলিতে) যা অন্তর্নিহিত। আপনার কোডটি কাজ না করার কারণটি হ'ল "প্রস্থ" কেবল টেবিল স্তরে ব্যাখ্যা করা যায়, টেবিল-সারি স্তরে নয়। আপনার যখন সরাসরি "টেবিল" থাকে এবং তারপরে "টেবিল-সেল" থাকে, সেগুলি পর পর বসে বসে স্পষ্টভাবে ব্যাখ্যা করা হয় ted

কাজের উদাহরণ:

<div class="view">
    <div>Type</div>
    <div>Name</div>                
</div>

সিএসএস সহ:

.view {
  width:100%;
  display:table;
}

.view > div {
  width:50%;
  display: table-cell;
}

Question 4

নোট করুন যে CSS3 অনুমান অনুসারে, আপনাকে আপনার লেআউটটিকে টেবিল-শৈলীর উপাদানগুলিতে আবৃত করতে হবে না। ব্রাউজারটি যদি উপাদানগুলির অস্তিত্ব না রাখে তবে তার অস্তিত্বকে তা আবিষ্কার করবে।

Question 5

উপর দিতে .view-typeবর্গ float:left;বা মুছতে float:right;এর.view-name

সম্পাদনা করুন:<div class="view-row"> উদাহরণস্বরূপ আপনার ডিভটি অন্য ডিভের সাথে মুড়ে দিন<div class="table">

এবং নিম্নলিখিত সিএসএস সেট করুন:

.table {
    display:table;
    width:100%;}

সঠিক ফলাফলের জন্য আপনাকে টেবিল কাঠামোটি ব্যবহার করতে হবে।

Question 6

আপনি সরাসরি টেবিলের মধ্যে টেবিল-সেল বাসাতে পারেন। তোমার কাছে টেবিল আছে ইথ টেবিল-সারি শুরু করা কার্যকর হয় না। এটি এইচটিএমএল দিয়ে চেষ্টা করুন:

<html>
  <head>
    <style type="text/css">
.table {
  display: table;
  width: 100%;
}
.tr {
  display: table-row;
  width: 100%;
}
.td {
  display: table-cell;
}
    </style>
  </head>
  <body>

    <div class="table">
      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>
    </div>

      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>

    <div class="table">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
    </div>

  </body>
</html>