CSS display: table-row ไม่ขยายเมื่อตั้งค่าความกว้างเป็น 100%

Question 1

ฉันมีปัญหาเล็กน้อย ฉันใช้ FireFox 3.6 และมีโครงสร้าง DOM ดังต่อไปนี้:

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

และ CSS ต่อไปนี้:

.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% ถ้าใส่กลับมันจะหดลง ฉันใส่สิ่งนี้ไว้ใน JS Bin:

http://jsbin.com/ifiyo

เกิดอะไรขึ้น?

Question 2

หากคุณใช้display:table-rowฯลฯ คุณต้องมีมาร์กอัปที่เหมาะสมซึ่งรวมถึงตารางที่มี โดยพื้นฐานแล้วคำถามเดิมของคุณจะให้มาร์กอัปที่ไม่ดีเทียบเท่ากับ:

<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>

CSS:

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

Question 3

คำตอบที่ผ่านการทดสอบ:

ใน css .view-row ให้เปลี่ยน:

display:table-row;

ถึง:

display:table

และได้รับการกำจัดของ "ลอย" ทุกอย่างจะดำเนินไปตามที่คาดหวัง

ตามที่ได้แนะนำไว้ในความคิดเห็นไม่จำเป็นต้องมีโต๊ะห่อ CSS อนุญาตให้ละเว้นระดับของโครงสร้างต้นไม้ (ในกรณีนี้คือแถว) ที่เป็นนัย สาเหตุที่โค้ดของคุณใช้ไม่ได้ก็คือ "ความกว้าง" สามารถตีความได้ที่ระดับตารางเท่านั้นไม่ใช่ที่ระดับแถวของตาราง เมื่อคุณมี "ตาราง" และ "ตารางเซลล์" อยู่ด้านล่างโดยตรงระบบจะตีความโดยปริยายว่านั่งอยู่ในแถว

ตัวอย่างการทำงาน:

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

ด้วย css:

.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 ของคุณ<div class="view-row">ด้วย div อื่นเช่น<div class="table">

และตั้งค่า css ต่อไปนี้:

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

คุณต้องใช้โครงสร้างตารางเพื่อให้ได้ผลลัพธ์ที่ถูกต้อง

Question 6

คุณสามารถซ้อนเซลล์ตารางได้โดยตรงภายในตาราง คุณควรมีโต๊ะ การเริ่มต้น eith table-row ไม่ทำงาน ลองใช้ HTML นี้:

<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>