Создание таблицы из div в CSS / HTML - PullRequest
Новая
       12

Создание таблицы из div в CSS / HTML

1 голос
/ 01 октября 2011

У меня есть содержимое в div шириной 400px, которое я хотел бы повторить по ширине экрана с интервалом 30px, аналогично макету этих модулей блога.

количество модулей в строке будет зависеть от ширины экрана, как в приведенном выше примере.

Я новичок в создании такого рода макетов с использованием divs.Моя самая большая проблема - заставить div лежать рядом друг с другом с 30px между ними, а затем начать новую строку.Любая помощь будет принята с благодарностью.

Ответы [ 3 ]

1 голос
/ 01 октября 2011

Вы можете достичь этого, дав float или display:inline-block

CSS: 

.block {
    margin-right: 30px;
    float: left;
    width: 400px;
    height:500px
}

.block:nth-child(3n+3){margin-right:0}

HTML: 

<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
0 голосов
/ 01 октября 2011

Попробуйте этот CSS: 

.myclass {  
    margin-right: 30px;  
    float: left;  
    width: 400px;  
}

и HTML: 

    <div>
         <div class="myclass">this is test block</div>
         <div class="myclass">this is test block</div>
         <div class="myclass">this is test block</div>
         <div class="myclass">this is test block</div>
   </div>
0 голосов
/ 01 октября 2011

CSS: 

div.block {
    margin-right: 30px;
    float: left;
    width: 400px;
}

HTML: 

<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
...