帮助css Float

Question

我知道很多人之前曾在float上提问，但即便看到它们，我也无法看到我做错了什么。我只想要

HELLO
THERE

就在ul的左边。基于this answer，我尝试将clear添加到父div。并基于this answer我尝试将overflow：hidden添加到父级。两者都没有。

在所有情况下，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 Example*

Answer 3

将ul更改为float：left。只要有水平空间，它就应该漂浮在HELLO THERE旁边。

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>