html - 在一行中查看主要内容和侧边栏。浮动：正确没有按预期工作

Question

我想在一行中并排查看主要内容和侧边栏。很简单，我想，只需添加一个浮点数：对；但事实证明这并不容易。

你可以在这里找到一个准备好的：http jsfiddle: //jsfiddle.net/W3MKx/

侧边栏（带有输入框的东西）应始终为 200 像素宽。

Answer 1

我建议执行以下操作：（工作 jsFiddle）

在不更改 HTML 结构的情况下应用以下 CSS：

#all {
    background: blue;
    overflow:hidden; /* This is mandatory to make the parent wrap around the children   */
}

#ball {
    background: red;
    float: right; /* float sidebar to the right */
    width:200px; /* constant width as you requested */
}

#chat{
    width:calc(100% - 210px); /* You can set the width in any way you choose - just make sure to leave room for the sidebar */
    float:left; /* float the chat to the left */
}

使用浮动元素时，最好将其设置overflow:hidden;为容器 - 这将强制它环绕所有子元素，无论其高度如何。您还必须设置聊天的宽度，以便为侧边栏留出空间。将聊天浮动到左侧，将侧边栏浮动到右侧。

Answer 2

如果您使用浮动方法，则应该首先在流程中放置：http: //jsfiddle.net/W3MKx/1/

<div id="all">
    <aside id="ball">
        <form>
            <input type="text" id="ueoa" autocomplete="off" placeholder="Search user" />
            <ul id="caoeu"></ul>
        </form>
    </aside>
    <article id="chat">
        <div id="chat-header"> <span class='label'>Site</span>
 <span id="iiae"></span>

            <button class="btn" id="nht">
                <img src="img/icon/htino.png" />View</button>
        </div>
        <div id="chat-entries"></div>
    </article>
</div>