Помогите с css Float

Question

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

ПРИВЕТ
ТАМ

Быть слева от ул. Основываясь на этом ответе Я попытался добавить ясно: оба к родительскому div. И на основании этого ответа я попытался добавить переполнение: скрыто для родителя. Ни один не работал.

Во всех случаях UL под ПРИВЕТ ТАМ и вправо.

        <div>
            <div style"float:left;">
                <div>HELLO</div>
                <div>THERE</div>
            </div>
            <div style="float:right;">
                <ul>
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                </ul>
            </div>
        </div> 

Answer 1

Просто float их обоих до left.Нет необходимости делать какие-либо очистки или что-то для того, что вы хотите.Проверьте демо ниже.

Live Demo

Разметка

<div>
    <div class="left">
        <div>HELLO</div>
        <div>THERE</div>
    </div>
    <div class="left">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </div>
</div> 

CSS

.left{float: left}

Answer 2

Ваш float: left; не применяется, потому что вы забыли =.Вы должны использовать оба div'а left, если хотите, чтобы они были рядом друг с другом:

<div>
    <div style="float:left;">
        <div>HELLO</div>
        <div>THERE</div>
    </div>
    <div style="float:left;">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </div>
</div>

. Возможно, вы захотите добавить overflow: hidden к родительскому div или пустому div, например:

<div style="clear:left;"></div>

в конце, чтобы содержимое после этого div было под ним, а не рядом с ним:

* JSFiddle Пример *

Answer 3

Измените ul на float: также слева.Пока есть горизонтальное пространство, оно должно плавать рядом с ПРИВЕТ ЗДЕСЬ.

Answer 4

Вместо того, чтобы очищать элементы вручную, используйте кросс-браузерный класс clearfix, например:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
    overflow: visible;
}

И примените его к вашему родительскому div:

<div class="clearfix">
    <div style="float:left;">
        <div>HELLO</div>
        <div>THERE</div>
    </div>
    <div style="float:right;">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </div>
</div> 

Answer 5

Я знаю, что к моменту публикации будет около 1000 ответов, но вам нужно указать ширину для самого внешнего div. Потому что без этого он по умолчанию имеет значение «auto», что означает, что он будет давить как можно дольше, поэтому <ul> опускается на следующую строку.

<div style="width:100%;">
    <div style="float:left;">
        <div>HELLO</div>
        <div>THERE</div>
    </div>
    <div style="float:left;">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </div>
</div>