CSS плавающая проблема

Question

Я знаю, что это вопрос начинающего srs, но здесь идет речь:

Я пытаюсь получить ящик со значком в верхнем левом углу, и все содержимое этого ящика будет справа от значка.

Это код, который я использую:

<div class="statsbox float_left">
    <img src="images/chart_bar.png" class="float_left"> 
    <div class="float_left">
        <p class="statsbox_header"> User Uploaded Images </p>
        <ul class="statsbox">
            <li class="statsbox"> 122 uploaded images </li>
            <li class="statsbox"> 13 images pending approval </li>
            <li class="statsbox"> 15 anonymous images </li>
            <li class="statsbox"> 97 unique users </li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
<div class="clear"></div>

кажется, что это должно работать, но превращается в это:

_{(источник: theviolencestopshere.ca )}

обозначены <div> теги.
Вы можете видеть, что <div>, содержащий список, по некоторым причинам перекрывает изображение.

Примечание: если неупорядоченный список не находится в этом div, то это работает как ожидалось. Это как присутствие пуль, толкающих его дальше влево.

Также обратите внимание: это все равно не сработает, если я оберну <img> в свой собственный div.

Что я здесь не так делаю? Класс float_left предсказуемо просто float: left, clear - просто clear: both, а остальные классы еще не определены, на случай, если это уместно.

Answer 1

Могу ли я предложить альтернативу? Я думаю, что и ваша разметка, и ваша CSS неоправданно многословны. Это немного грубый пример, но, надеюсь, этого достаточно, чтобы проиллюстрировать мою точку зрения:

<style type="text/css">
    .statsbox {
        background: transparent url(path_to_image) no-repeat 9px 20px;
        float: left;
        width: 300px;
    }

    #stats h3 {
    }

    #stats {
        padding-left: 40px;
    }

    #stats ul {
        padding-left: 1em;
    }

</style>

<div class="statsbox">
    <div id="stats">
        <h3> User Uploaded Images </h3>
        <ul>
           <li> 122 uploaded images </li>
           <li> 13 images pending approval </li>
           <li> 15 anonymous images </li>
           <li> 97 unique users </li>
        </ul>
    </div>
</div>

Вот ключевые вещи, которые я здесь делаю:

1. Удаление элемента img и применение его в качестве фонового изображения .statsbox. Это на самом деле дает вам большую гибкость в отношении того, куда идет изображение, без влияния на другие элементы в html.

2. Избегание использования post-style-postition: inside - использование этого свойства означает, что маркеры в основном отображаются как часть текстовой строки, на которой они находятся; если по какой-либо причине происходит перенос строк, маркеры не будут правильно выстроены.

3. Сделано <p class="statsbox_header"> User Uploaded Images </p> вместо h3. Вы указали, что это заголовок, поэтому вы также можете использовать этот элемент, так как это приводит к более чистой разметке / CSS.

4. Удален класс «statsbox» из элементов <li>, так как наследование CSS означает, что вы должны иметь возможность стилизовать их просто с помощью селектора, например .statsbox li или аналогичного. Что снова упрощает разметку и стили.

Извините, я немного тороплюсь с банкоматом времени, но если вам нужно, чтобы я расширил этот ответ, тогда, пожалуйста, просто спросите:)

Answer 2

<div>, содержащий <ul>, кажется, расширяется влево из-за списка. Я обнаружил, что если установить для list-style-type значение none, это сработало (аналогично, если я полностью удалил список, все сработало, как и ожидалось).

Это было похоже на список text , нарисованный на самом левом краю <div>, а затем пули отодвинули его обратно влево.

Итак, я нашел атрибут list-style-position и поместил list-style-position: inside в свой селектор ul.statsbox.

Я думаю, вы можете использовать inside, чтобы сказать, что маркеры должны быть внутри потока текста, и outside, чтобы сказать, что пули должны быть нарисованы вне потока текста.

ul.statsbox {

    list-style-position: inside;

}

.float_left {

    float: left;

}

.float_right {

    float: right;

}

.clear {

    clear: both;

}

Этот CSS, примененный к HTML в вопросе, создает ожидаемый результат.

Answer 3

2-му внутреннему элементу div нужна ширина, иначе он никогда не подойдет.попробуйте это:

<style type="text/css">
* {
    border:1px solid red;
}
.statsbox {
    width:400px;
}
.float_left
{
    float:left;
}
/* stats needs a width */
#stats
{
    width:150px;
}
</style>
<div class="statsbox float_left">
    <img src="images/chart_bar.png" class="float_left">
    <div class="float_left" id="stats">
        <p class="statsbox_header"> User Uploaded Images </p>
        <ul class="statsbox">
            <li class="statsbox"> 122 uploaded images </li>
            <li class="statsbox"> 13 images pending approval </li>
            <li class="statsbox"> 15 anonymous images </li>
            <li class="statsbox"> 97 unique users </li>
        </ul>
    </div>
    <div class="clear"></div>
</div>
<div class="clear"></div>

Answer 4

Если я добавлю display: inline к .float_left, все будет работать как положено.

.float_left{ float: left; display: inline; }

Обновление кажется, что граница, указанная в div, также играет роль. удаление их нарушает отображение в FF3.5.

Answer 5

Вы пробовали отображать: встроенный?