我想在一行中并排查看主要内容和侧边栏。很简单,我想,只需添加一个浮点数:对;但事实证明这并不容易。
你可以在这里找到一个准备好的:http jsfiddle
: //jsfiddle.net/W3MKx/
侧边栏(带有输入框的东西)应始终为 200 像素宽。
我想在一行中并排查看主要内容和侧边栏。很简单,我想,只需添加一个浮点数:对;但事实证明这并不容易。
你可以在这里找到一个准备好的:http jsfiddle
: //jsfiddle.net/W3MKx/
侧边栏(带有输入框的东西)应始终为 200 像素宽。
我建议执行以下操作:(工作 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;
为容器 - 这将强制它环绕所有子元素,无论其高度如何。您还必须设置聊天的宽度,以便为侧边栏留出空间。将聊天浮动到左侧,将侧边栏浮动到右侧。
如果您使用浮动方法,则应该首先在流程中放置: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>