0

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

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

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

4

2 回答 2

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;为容器 - 这将强制它环绕所有子元素,无论其高度如何。您还必须设置聊天的宽度,以便为侧边栏留出空间。将聊天浮动到左侧,将侧边栏浮动到右侧。

于 2013-07-12T13:34:22.880 回答
0

如果您使用浮动方法,则应该首先在流程中放置: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>
于 2013-07-12T13:31:02.493 回答