CSS: проблема со свойством Float

Question

Вот моя проблема с CSS, когда я использую свойство Float Моя фотография: http://www.sourimage.com/show-image.php?id=fb748238bf7e4ab12001e64cb543066b

Это не выглядит хорошо, потому что много пустого пространства среди блока. Мой код CSS:

.listcol{
    width:180px;
    float:left;
    margin-right:5px;
    background-color:#eceff1;
    margin-top: 1px;
    min-height:200px;
    background-image: url(../images/colbg_btm.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    margin-bottom: 0px; 
}
.listcol ul{
    margin-left: 0px;
    padding-left: 0px;
    padding-top: 0px;
    margin-top: 0px;
    list-style-type: none;
}

Пожалуйста, ознакомьтесь с обзором и помогите мне исправить отсутствие пробелов на экране! Большое спасибо!

Answer 1

Невозможно увидеть изображение, но, возможно, если вы выразите ширину в процентах от ширины страницы ... Вместо 180px, возможно

width: 80%;

.. используя любой процент, который вам больше нравится.

Answer 2

Пожалуйста, попробуйте избавиться от "min-height" в .listcol. Кроме того, избавьтесь от «position: absolute» в «.listcol».

Дайте мне знать, если это сработало.

Если этого не произойдет, вы можете попытаться изменить свой HTML, чтобы он был в столбцах, например:

<div class="column">

    <div class="box"></div>

    <div class="box"></div>

</div>

<div class="column">

        <div class="box"></div>

        <div class="box"></div>

</div>

И CSS:

.column{
    float: left;
    width: 200px;
    margin-right: 5px;
}

.box{
    margin: 0px;
}

Answer 3

Хюинь:

Вам нужно обернуть div вокруг каждого из ваших столбцов. Это должно позволить блокам перетекать сверху вниз в пределах их собственного div, и тогда вы можете перемещать каждый из столбцов div. Дайте каждому div ширину 25%. Возможно, вы также захотите обернуть все это в элемент div и задать ему ширину 100%.

Answer 4

Нельзя избежать пробела в текущем решении, потому что высота блока2 «отталкивает» блок3, когда он перемещается влево.

Таким образом, вам, вероятно, понадобится совершенно другой макет HTML для решения вашего запроса ...

Пожалуйста, покажите нам несколько примеров того, как вы хотите, чтобы страница выглядела с большим количеством элементов li разной высоты.

Answer 5

Я пытаюсь обойти ваши идеи, но это не хорошо. Кроме того, я поставил свой HTML, как показано ниже:

#content02{
    width:740px;
    float:left;
    margin-left: 10px;
}
.wrapper{
    width:760px;
    margin-left:auto;
    margin-right:auto;
}
.main02{
    width:760px;
    float:left;
    background-color:#FFFFFF;
    padding-bottom:20px;
    padding-top: 10px;
}
.listcol{
    width:180px;
    float:left;
    --position: absolute;
    margin-right:5px;
    background-color:#eceff1;
    margin-top: 1px;
    min-height:200px;
    margin-bottom: 0px; 
}
.listcol ul{
    margin-left: 0px;
    padding-left: 0px;
    padding-top: 0px;
    margin-top: 0px;
    list-style-type: none;
}
.listheader{
    display: block;
    margin-top: 0px;
    background-color: #2F404A;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 10px;
    width: 180px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-position: top;
    text-align: center; 
}

<div class="wrapper">

<div class="main02">
<div id="content02">
<div class="listcol">
<ul>

</ul>
</div>
<div class="listcol">
<ul>

</ul>
.....
.....
</div>

Обращаем ваше внимание, что количество блоков увеличивается динамически и используется тот же стиль «listcol». Вы можете увидеть картинку, изображающую эту проблему здесь: http://www.sourimage.com/show-image.php?id=fb748238bf7e4ab12001e64cb543066b

Answer 6

Я думаю, что вы можете решить вашу проблему, задав высоту строки для li как "0px".

ul li { 
 float:left;
 line-height:0px;
}
ul {
 width:124px;
}


<ul>
    <li><img src="images.jpeg" /></li>
    <li><img src="images.jpeg" /></li>
</ul>

Answer 7

Можете ли вы опубликовать некоторые из HTML? Или исправить изображение? Похоже, вы позаботились о левом поле для вашего UL, но в некоторых других ваших блочных элементах могут быть дополнительные запасы, поскольку они имеют встроенный запас.

Я также согласен с Робертом Харви. Попробуйте использовать проценты там, где это разумно, вместо пикселей. он будет более последовательным при любых изменениях, вносимых пользователем или браузером в размер экрана, размер шрифта и т. д.

являются block1, 2 и 3 всеми UL в списке divcol?

Answer 8

Я думаю, что мы должны увидеть вашу HTML-разметку, чтобы убедиться, но вам нужно иметь структуру, в которой block1 и block3 находятся в блоке контейнера. Контейнер может плавать, и block2 может плавать. Block1 и block3 не должны плавать.