Ushbu CSS-ni qanday yaratish kerak?

Men divlarga amal qilishim kerak:

   <div id="cont">
      <div class="row">
        <div class="col">1</div>
        <div class="col">example.com</div>
        <div class="col">text1</div>                   
        <div class="col">text1</div>
      </div>  
      <div class="row">
        <div class="col">2</div>
        <div class="col">example2.com</div>
        <div class="col">text2</div>                   
        <div class="col">text2</div>
      </div>  
    </div>

Ushbu "stol" uchun CSSni qanday yozishni tushunmoqchiman.

deb o'ylayman. class = "col" kerak float: chap (har bir div ning ketma-ket, gorizontal bo'lishi kerak)

class = "satr" yozing?

EDIT: I don't want a table, I wrote "table" because I need the same think of:

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

lekin buni faqat div'lar yordamida qilish kerak.

1
Agar jadvalli ma'lumotlar bo'lsa, jadvaldan foydalaning!
qo'shib qo'ydi muallif Kyle, manba

5 javoblar

Just use a table

Odamlar siz jadvallardan foydalanmasligingizni aytganda, ular tartibni tuzilishiga ishora qiladilar. Bu holatda undan foydalanish yaxshi, ular yomon emas!

2
qo'shib qo'ydi
Div'llarni ishlatishim kerak, iltimos, asl xabardagi tahrirni o'qing
qo'shib qo'ydi muallif Dail, manba
@Dail - Nima uchun? Ushbu belgilanish jadvalli ma'lumotlarni saqlash uchun ishlatilmaydimi?
qo'shib qo'ydi muallif Curt, manba

Use the CSS as shown below. These make your DIVs look like a table ( http://jsfiddle.net/H7NQV/). Your example looks like tabular data, so I recommend using a table though.
The <table> tag supports features which are not (yet) implemented in CSS, such as colspan and rowspan.

.cont {
    display: table;
}
.row {
    display: table-row;
}
.col {
    display: table-cell;
}
2
qo'shib qo'ydi
Div'llarni ishlatishim kerak, iltimos, asl xabardagi tahrirni o'qing
qo'shib qo'ydi muallif Dail, manba
@Dail Mening javobim HTML kodingizni o'zgartirmagan. Jadvallarga o'tish uchun uchini taklif qilganda, DIV'lar yordamida fikringizni amalga oshirish uchun CSS-ni qo'shib qo'ydim. Faqat DIVs jadval: jsfiddle.net/H7NQV
qo'shib qo'ydi muallif Rob W, manba

Sizning CSS-ingiz shunday bo'lishi kerak deb o'ylayman:

.row{
    display:block;
}

.col{
    display:inline-block;
    width:200px;/*for example*/
}
1
qo'shib qo'ydi

Ushbu yozuvni CSS-jadvallar va boshqalar HTML-jadvallari haqida o'qing. Bu sizning savolingizga qanday javob berish kerakligi haqida javob berish kerak. Bundan tashqari, sizga faqatgina oddiy jadval o'rniga CSS-jadvallarni ishlatishdan haqiqiy qiymat beradimi-yo'qligini ko'rib chiqasiz.

0
qo'shib qo'ydi

Sinov satr qanday ishlashi kerak edi? Agar siz uni konfiguratsiya qilmasangiz, u to'g'ri ko'rinishi kerak deb o'ylayman. Yaxshiyamki, siz jadvallar uchun jadvaldan foydalanishingiz kerak.

0
qo'shib qo'ydi
Div'llarni ishlatishim kerak, iltimos, asl xabardagi tahrirni o'qing
qo'shib qo'ydi muallif Dail, manba
Divsni ishlatish uchun nima uchun kerak ?
qo'shib qo'ydi muallif Kyle, manba