удалить пробел между divs или tiling divs

Я хочу показать некоторые div в HTML-странице, которые автоматически разбиваются на разделы, без каких-либо промежутков между ними. Как я могу достичь этого, пожалуйста, дайте свои предложения. Также я хочу, чтобы div автоматически настраивался после удаления некоторых разделов с помощью кнопки закрытия.удалить пробел между divs или tiling divs

HTML КОД:

<div class="row"> 
<div class="main" id="1"> 
    <p>This is sample test</p> 
    <a href="javascript:close('1')">Close</a> 
</div> 
<div class=" main " id="2"> 
    <p>This is some sample text which is longer than the other div's and I want other divs to automatically arrange around this wihout space</p> 
    <a href="javascript:close(2)">Close</a> 

</div> 
<div class="main" id="3"> 
    <h3>I want to move this div UP and remove space below this div</h3> 
    <a href="javascript:close(3)">Close</a> 
</div> 
<div class=" main " id="4"> 
    <p>This is sample test</p> 
    <a href="javascript:close(4)">Close</a> 

</div> 
<div class="main" id="5"> 
    <p>This is sample test</p> <a href="javascript:close(5)">Close</a> 

</div> 
<div class=" main " id="6"> 
    <p>This is sample test</p> 
    <a href="javascript:close(6)">Close</a> 
</div> 
</div>

CSS:

.main { 
    position: relative; 
    padding-left: 15px; 
    padding-right: 15px; 
    float: left; 
    width: 40%; 
    border: 3px coral solid; 
    margin: 10px; 
}

JAVASCRIPT:

function close(id) { 
    $(document).ready(function() { 
     $("#" + id).remove(); 
    }); 
}

Демо здесь: http://jsfiddle.net/Bc7tU/1/

источник

2013-10-04 Robert

если вы не хотите пробелы удаляют маржу. –

@PatrickEvans То, чего не хочет OP. Если вы посмотрите на jsfiddle, он упоминает, что он хочет. –

Тогда это должно было быть объяснено в фактическом вопросе не содержимом html. @Rams, если вам нужны даже столбцы/строки, вам нужно установить ширину и высоту, чтобы все они имели такую же ширину ширины. –

вы должны добавить к вашей CSS:

.main:nth-child(2n+1) { 
    clear: left; 
}

источник

2013-10-04 20:16:30 lukaleli

, не уверенный, что он будет делать, но я попробовал его в [link] (http://jsfiddle.net/Bc7tU/1 /) и не работает должным образом. Спасибо за ответ. – Robert

Вы просто хотели избавиться от вертикальных пространств или что? этот фрагмент кода удаляет левые, плавающие на каждом нечетном элементе, поэтому он удаляет вертикальное расстояние между ними. Невозможно делать то, что вы хотите, чтобы они держались без какого-либо промежутка, пока их высота различается между ними. Единственный способ добиться этого - использовать компоновку столбца css3 (очень плохая поддержка в браузерах), или вы должны использовать javascript для пересчета сетки (например, плагин jQuery Masonry) – lukaleli

Remove/уменьшить запас и назначить фиксированную высоту для плитки эффект на ваш HTML

Попробуйте с

.main { 
position: relative; 
padding-left: 15px; 
padding-right: 15px; 
float: left; 
width: 40%; 
border: 3px coral solid; 
margin: 2px; 
height:150px;

}

источник

2013-10-04 20:21:15

Я не хочу упоминать высоту, поскольку содержимое divs динамично в моем случай .. Спасибо! – Robert

.main { 
    position: relative; 
    padding-left: 15px; 
    padding-right: 15px; 
    float: left; 
    width: 40%; 
    border: 3px coral solid; 
    clear:left 
}

источник

2013-10-04 20:38:09

Я хочу показать их в 2 колонках! Так что использование clear не работает. взгляните на [link] (http://jsfiddle.net/Bc7tU/1/) – Robert

.main { 
    position: relative; 
    padding-left: 15px; 
    padding-right: 15px; 
    float: left; 
    width: 40%; 
    clear:both; 
    border: 3px coral solid; 
    margin: 0px; 
}

источник

2013-10-04 20:48:39 Bala

удалить пробел между divs или tiling divs

ответ

Смежные вопросы