divs-да кестелер ретінде бірдей нәрсе жасау

Мен CSS-ді тереңдете бастадым және сайтты html-ті айналдыруды шештім деп шештім.

Мен бірдей нәрсемен div-ді осы сынақ бетіндегі кестелермен орындауға тырысамын. Бірақ менде бірнеше проблемалар бар:

  1. бағандарды жасау мүмкін емес
  2. Тік мәтінді туралау

How far I've gotten: table vs div

Код:

 
<body>


<table class="line">
  <tbody>
    <tr>
      <td class="topic" colspan="3">Table</td>
    </tr>
    <tr class="row">
      <td width="20%" align="left">Test</td>
      <td width="20%" align="center">1</td>
    </tr>
    <tr class="row">
      <td align="left">Test</td>
      <td align="center">2</td>
    </tr>
  </tbody>
</table>
 

<div class="line"> <div class="topic">Div</div> <div class="row">Test</div><div class="row">1</div> <div class="row">Test</div><div class="row">2</div> </div>

1
Сіз неге жетуге тырысасыз? Кестелердің divs (мысалы, кестелік деректерді ұсыну) мүмкіндіктері бар.
қосылды автор Madara Uchiha, көзі
Ені тіркелген ба?
қосылды автор Šime Vidas, көзі
@domino Fixed тіркелген мәнді пикселдермен білдіреді. Бұл орналасу тіркелген ені бар ма?
қосылды автор Šime Vidas, көзі
@Truth жақсы мен кестелерді немесе divs-ды ғана пайдаланатын болсам, екеуінің де емес екенін жақсы білдім. Қазіргі уақытта менің жоспарым барлық кестелерді пайдаланады. Мен барлық нәрсені divs және CSS түрлендіруге тырысамын.
қосылды автор domino, көзі
@ Šime Vidas Иә, олар екеуі де 50%
қосылды автор domino, көзі
Иә, бұл істейді. Сен неге сұрайсың?
қосылды автор domino, көзі

5 жауаптар

table > div с түрлендіретінін көргеніңіз жөн, бірақ қажет болғанда ғана бұл әрекетті орындағаныңызға көз жеткізіңіз.

Егер беттегі деректер кестелік болса, онда бұл table элементіне қоюдың мағынасы бар.

Div's are for layout and structure, table's are for displaying tabular data.

Менің колледжім бір кездері үстелдер құрылымы бойынша дивлерден форум құруды өткізді. Мұның бәрі «үстелдер жаман, div мен CSS-ні ​​қолданыңыз» деп айтқан болатын. Бұл жай ғана құрылым құрылымына қатысты екенін есте сақтау маңызды.

Егер құрылымыңызда жолдар мен бағандар болса, кестені пайдаланыңыз. кестелер әлі де пайдалы HTML элементтеріне жарамды және олар ескірген.

5
қосылды
@domino - Жоқ, деректерді көрсету үшін HTML кестелерін пайдалануда ешқандай қате болмайды және оны divs-ды пайдаланудан гөрі жақсы әдіс деп білемін. Оның қол жетімділігі жағынан жақсы.
қосылды автор Curt, көзі
Рахмет, мен оларды араласпау керек және тек біреуін пайдалану керек деген әсер алдым.
қосылды автор domino, көзі

Мінеки:

HTML:

<div id="wrap">
    

Div

<div class="section"> <div> Test </div> <div> 1 </div> </div> <div class="section"> <div> Test </div> <div> 2 </div> </div> </div>

CSS:

#wrap {
    border: 2px solid #333;
    padding: 2px;
}

h2 {
    background: green;
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 4px 0;
}

.section {
    overflow: auto;
    margin-top: 2px;
}

.section > div {
    float:left;
    width: 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: #333;
    color: white;
    padding: 4px 0;
}

.section > div + div {
    text-align: center;
    border-left: 2px solid black;
}

Live demo: http://jsfiddle.net/jNQrM/1/

1
қосылды
@domino X> Y - бұл бала комбинаторының селекторы . X + Y - бұл көрші совящий комбинаторы селектор . .section> div + div селекторы барлық атаулы DIV элементтеріне сәйкес келеді, оларда ата-ананың 'бөлімі бар және алдыңғы ағылшынша DIV элементі болып табылады. Менің ойымша, барлық DIV ішіндегі бірінші .section ішіндегі бірінші бала емес, ergo, екінші DIV, үшінші DIV, ect. (Сіздің жағдайда әрбір .section тек екі DIV-ді қамтиды, сондықтан тек екіншісі сәйкес келеді.)
қосылды автор Šime Vidas, көзі
Рахмет, бұл көп түсіндіреді. section> div + div - CSS файлында ешқашан мұндай нәрсе көрмеген. Сіз бұл туралы не айта аламын?
қосылды автор domino, көзі
  1. Жақсы кітапты алыңыз - Мен CSS ұсынамын: Жетіспейтін нұсқаулық (жоқ нұсқаулар)

  2. display салыстырмалы

  3. float
1
қосылды

Css display сипатын қараңыз.

.line {
display: table;
}

.row {
display: table-cell;
}

Бірақ интернет-зерттеушіге қандай да бір қиындықтар керек. Бұл кастада көрсетуді қолдануға болады: inline; Мөлшері бар: 1;

0
қосылды

Float қою: сол; осы сыныпта:     div.row

0
қосылды