много ящиков (элементы div), между ними есть пробелы

0

У меня много ящиков (div) разных размеров.
Ниже приведен снимок экрана о проблеме:
Изображение 174551

Мой код:

HTML

<div id="categories_container">
    <div class="main_category">
        <div class="categories_title"><a href="#"> <img src="template/images/image.png" alt="" /><h2> Title </h2></a>

            <div style="clear:both;"></div>
        </div>
        <ul>
            <li> <a href="#" title=""> item </a> 
            </li>
        </ul>
    </div>
</div>

CSS

div#center_container {}
div#categories_container {width:65%; margin:5px; float:left;}
div.main_category {width:197px; float:right; margin:0 10px 10px 0;}
div.categories_title img {float:right; margin-left:5px}
div.categories_title h2{float:right; font-size:20px;}
div.main_category ul {list-style-type:none; margin:0; padding:0}
div.main_category ul li {margin: 0 0 .2em 0;}
div.main_category ul li a{color:#6E6B64; font:normal 18px tahoma; display:block; background-color:#f4f4f4; padding: .2em .3em;}
div.main_category ul li a:hover {color:#F37020; background-color:#e7e7e7;}

Я не хочу пробела между каждой коробкой, независимо от размера каждой коробки.

  • 2
    пожалуйста, дайте jsfiddle к нему
  • 0
    будет лучше поделиться реальным URL.
Показать ещё 2 комментария
Теги:

3 ответа

0
Лучший ответ

Если вы хотите удалить ненужные пробелы, вы можете создать три контейнера и разместить свои категории

HTML

<div id="categories_container">
    <div class="col col1">
      <div class="category">cat</div>
      <div class="category">cat</div>
    </div>
    <div class="col col2">
      <div class="category">cat</div>
      <div class="category">cat</div>
    </div>
    <div class="col col3">
      <div class="category">cat</div>
      <div class="category">cat</div>
    </div>   
</div>

CSS

.col {
   width: 33%;
   float: left;
}

#categories_container {
   overflow: hidden;
}

DEMO

Поделиться
  • 0
    Спасибо, но вы использовали во внутреннем 2 div , и я хочу, чтобы один div был заголовком блока, тогда следующим элементом будет список ex: ul li .
  • 0
    @LionKing как это? jsfiddle.net/sK743/3
Показать ещё 6 комментариев
0

#categories_container или другой класс, обертывающий верхнюю строку, #categories_container определенную высоту для строки. Вы это проверили?

Поделиться
  • 0
    Да, есть другой родительский div <div id="center_container"> , но я не применяю никакого кода CSS к этому элементу.
0

Изменить это

div.main_category {width:197px; float:right; margin:0 10px 10px 0;}

в

div.main_category {width:197px; float:right; margin:0 10px 0 0;}

margin: TOP RIGHT BOTTOM LEFT

Поделиться
  • 0
    К сожалению, проблема все еще существует.
  • 0
    Можете ли вы предоставить полный HTML-код для всех ящиков?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню