html - 在一行中查看主要内容和侧边栏。 float :right not working as expected

Question

我想在一行中并排查看主要内容和侧边栏。 很简单，我想，只需添加一个 float:right;但事实证明这并不容易。

您可以在此处找到准备好的 jsfiddle:http://jsfiddle.net/W3MKx/

侧边栏(带有输入框的部分)的宽度应始终为 200 像素。

Answer 1

我建议执行以下操作:( working 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 */
}

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