Wyświetlanie CSS: wiersz tabeli nie rozwija się, gdy szerokość jest ustawiona na 100%

Mam pewien problem. Używam Firefox 3.6 i mieć następującą strukturę DOM:Wyświetlanie CSS: wiersz tabeli nie rozwija się, gdy szerokość jest ustawiona na 100%

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

I następujące CSS:

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

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

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

Gdybym zdjąć display:table-row pojawi się ona prawidłowo, z view-row pokazując szerokość 100%. Jeśli go odłożę, kurczy się. Wrzuciłem to się na JS Bin:

http://jsbin.com/ifiyo

Co się dzieje?

Źródło

2010-08-13 chum of chance

Jeśli używasz display:table-row itp., Potrzebujesz odpowiedniego znacznika, który zawiera tabelę zawierającą. Bez tego twoje pierwotne pytanie w zasadzie zapewnia równoważne złe oznaczenie:

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

Gdzie jest tabela powyżej? Nie można po prostu mieć wiersz znikąd (TR muszą być zawarte w jednej table, thead, tbody itp)

Zamiast dodać element zewnętrzny z display:table, umieścić 100% szerokości na elemencie zawierającym. Dwie wewnętrzne komórki automatycznie zmienią wartość 50/50 i wyrównają tekst bezpośrednio na drugiej komórce. Zapomnij floats z elementami stołu. Będzie powodować tak wiele bólów głowy.

markup:

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

Źródło

2010-08-13 19:55:24

+5 na pozbyciu się cholernych pływaków! –

Wygląda na to, że można uzyskać lepszy sposób z pominięciem 'display: table-row; ', jeśli znacznik ma tylko jeden wiersz; 'display: table-cell;' wydaje się wywnioskować zawierający wiersz. Jeśli jednak chcesz uzyskać wygląd innego lub wielu wierszy, potrzebujesz 'display: table-row;': http://jsbin.com/ifiyo/9 – DanDan

+29

-1, ponieważ wyjaśnienie jest po prostu błędne. Zgodnie ze specyfikacją [CSS2.1] (http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes), dany znacznik/CSS powinien działać. – user123444555621

dać na .view-type klasy float:left; lub usunąć float:right; z .view-name

EDIT: Owiń div <div class="view-row"> z innego div na przykład <div class="table">

i ustawić następujące CSS:

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

Musisz użyć struktury tabeli, aby uzyskać poprawne wyniki.

Źródło

2010-08-13 19:36:38 Sotiris

Tried, że to nie działa. –

Testowałem z ff3.6, tj. 8, chrom, opera. możesz to zobaczyć tutaj http://jsbin.com/ifiyo/4 pokazują je obok siebie – Sotiris

Szukałem nazwy po prawej stronie, wpisz po lewej stronie ... jeśli robisz wyświetlacz: wbudowany zarówno i wyjmij wyświetlacz: wiersz tabeli działa, myślałem, że może być lepszy sposób to zrobić przy użyciu właściwości wiersza tabeli/komórki. –

Należy zauważyć, że według specyfikacji CSS3, nie trzeba zawijać swój układ w tabeli elementu stylu. Przeglądarka wnioskuje o istnieniu elementów zawierających, jeśli nie istnieją.

Źródło

2011-09-13 04:27:58

To samo zostało [określone w CSS 2.1] (http: //www.w3.org/TR/CSS2/tables.html # anonymous-boxes), sekcja 17.2.1, top 3.2. Poniższy przykład HBOX/VBOX jest dokładnie taki, o którym mowa. Wygląda na to, że przeglądarki nie obchodzą. – user123444555621

Gniazdo można zagnieździć bezpośrednio w tabeli. Musisz mieć stół. Uruchomienie wiersza tabeli eith nie działa. Spróbuj z tym 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>

Źródło

2011-10-31 11:45:24 rakensi

Testowany odpowiedź:

w Wielkopolsce.view-row css, zmiana:

display:table-row;

do:

display:table

i pozbyć "pływaka". Wszystko będzie działać zgodnie z oczekiwaniami.

Jak zasugerowano w komentarzach, nie ma potrzeby pakowania w stół. CSS pozwala na pominięcie poziomów struktury drzewa (w tym przypadku wierszy), które są niejawne. Powodem, dla którego twój kod nie działa, jest to, że "szerokość" może być interpretowana tylko na poziomie tabeli, a nie na poziomie wiersza tabeli. Kiedy masz "stół", a następnie "komórki tabeli" bezpośrednio pod spodem, są one implicytnie interpretowane jako siedzące z rzędu.

przykład robocza:

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

z CSS:

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

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

Źródło

2012-08-16 23:48:16

Twoja odpowiedź sugeruje, że odpowiednik CSS '' '' '' '', który sam w sobie byłby nieprawidłowym znacznikiem HTML, jak na W3C. Podczas sprawdzania, dlaczego chcesz zasugerować przeglądarce, aby naśladowała ten znacznik? –

+16

Jest to zgodne z regułami CSS: http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes. Łatwiej jest go zachować, usuwając niepotrzebne wiersze kodu (na przykład niepotrzebny div zasugerowany przez KP.). To mi pomogło ... Używam tego. +1 – BillR

Czy to nie wystarczy, by pozbyć się instrukcji float? Plik div podglądu może zachować jego wyświetlanie: właściwość wiersza tabeli. – Ideogram

Wyświetlanie CSS: wiersz tabeli nie rozwija się, gdy szerokość jest ustawiona na 100%

Odpowiedz

Powiązane problemy