Css 溢出:在chrome和firefox中自动中断布局
为什么Css 溢出:在chrome和firefox中自动中断布局,css,google-chrome,firefox,css-float,Css,Google Chrome,Firefox,Css Float,为什么溢出:自动在.pageContent上打破Chrome和Firefox的布局?它在狩猎中非常有效。我怎样才能着手修理它呢?我添加了它,这样就清晰了:两者都是只会清除内容,而不会清除整个.pageAttributesdiv 是网站 它看起来像是上的边框底部。从导致它的菜单中选择了。但还是不知道为什么 更新-测试用例 我尝试过溢出:可见但这会破坏h2 HTML 对我来说,这似乎是一个浮动的问题,我无法清除。按钮和搜索输入之间的差异。因此,定位可能是这样的解决方案 拨弄 html,正文{ 宽度
溢出:自动
在.pageContent
上打破Chrome和Firefox的布局?它在狩猎中非常有效。我怎样才能着手修理它呢?我添加了它,这样就清晰了:两者都是h2
上的code>只会清除内容,而不会清除整个.pageAttributes
div
是网站
它看起来像是上的边框底部
。从导致它的菜单中选择了
。但还是不知道为什么
更新-测试用例
我尝试过溢出:可见代码>但这会破坏h2
HTML
对我来说,这似乎是一个浮动的问题,我无法清除。按钮和搜索输入之间的差异。因此,定位可能是这样的解决方案
拨弄
html,正文{
宽度:100%;
身高:100%;
边际:0px;
填充:0px;
}
.第页{
位置:相对位置;
宽度:1010px;
填充:0 5px 0 5px;
保证金:0自动30px自动;
}
.pageAttributes{
位置:绝对位置;
左:0px;
顶部:0px;
宽度:245px;
高度:250px;
边缘底部:20px;
背景色:#ccc;
}
.页面菜单{
左边距:250像素;
高度:25px;
边缘底部:-1px;
边框底部:1px实心#a7d7f9;
左侧填充:1px;
右侧填充:1px;
}
.页面菜单.按钮{
浮动:左;
左边距:-1px;
高度:24px;
边框顶部:1px实心#a7d7f9;
左边框:1px实心#a7d7f9;
右边框:1px实心#a7d7f9;
左侧填充:15px;
右侧填充:15px;
文本对齐:居中;
线高:25px;
字体系列:无衬线;
字体大小:13px;
光标:指针;
}
.pageMenu.button.selected{
背景色:白色;
边框底部:1px纯白;
游标:默认值;
}
.pageMenu.search{
浮动:对;
右边距:-1px;
高度:24px;
边框顶部:1px实心#a7d7f9;
左边框:1px实心#a7d7f9;
右边框:1px实心#a7d7f9;
左侧填充:15px;
右侧填充:15px;
文本对齐:居中;
线高:25px;
字体系列:无衬线;
字体大小:13px;
游标:默认值;
}
.网页内容{
位置:绝对位置;
宽度:748px;
边框:1px实心#a7d7f9;
边缘底部:5px;
填充物:5px;
背景色:白色;
线高:1.5em;
溢出:自动;
清楚:对,;
左边距:250像素;
}
.pageContent h2{
边缘顶部:25px;
利润底部:3倍;
字体大小:16px;
边框底部:1px点#CCC;
明确:两者皆有;
}
.pageAttributes
看法
编辑
谈话
搜索:
标题
乱数假文
试试这个
#articleSections{
float: left;
}
并移除溢出:auto
从.pageContent
是否尝试将其更改为溢出:可见代码>?我登录了Chrome和Firefox,看起来很有效。@cHao-添加了测试用例(代码和JSFIDLE)@maqjav-这打破了h2
的清晰。让我们做一些测试。如果您将pageMenu div移动到pageAttributes div的顶部会怎么样?@maqjav-pageContent看起来不错,pageAttributes向下移动,在Menuth下面出现了浮动问题。按钮为什么要浮动所有内容?你能用绝对和相对来定位盒子吗?这是最接近的。我添加了一个.pageContentInner
,并添加了溢出:auto代码>到它。如果没有这个,我会想到的。
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.page {
width: 1010px;
padding: 0 5px 0 5px;
margin: 0 auto 30px auto;
}
.pageAttributes {
float: left;
width: 245px;
height: 250px;
margin-bottom: 20px;
background-color: #ccc;
}
.pageMenu {
clear: right;
margin-left: 250px;
height: 25px;
margin-bottom: -1px;
border-bottom: 1px solid #a7d7f9;
padding-left: 1px;
padding-right: 1px;
}
.pageMenu .button {
float: left;
margin-left: -1px;
height: 24px;
border-top: 1px solid #a7d7f9;
border-left: 1px solid #a7d7f9;
border-right: 1px solid #a7d7f9;
padding-left: 15px;
padding-right: 15px;
text-align: center;
line-height: 25px;
font-family: sans-serif;
font-size: 13px;
cursor: pointer;
}
.pageMenu .button.selected {
background-color: white;
border-bottom: 1px solid white;
cursor: default;
}
.pageMenu .search {
float: right;
margin-right: -1px;
height: 24px;
border-top: 1px solid #a7d7f9;
border-left: 1px solid #a7d7f9;
border-right: 1px solid #a7d7f9;
padding-left: 15px;
padding-right: 15px;
text-align: center;
line-height: 25px;
font-family: sans-serif;
font-size: 13px;
cursor: default;
}
.pageContent {
position: relative;
border: 1px solid #a7d7f9;
margin-bottom: 5px;
padding: 5px;
background-color: white;
line-height: 1.5em;
overflow: auto;
clear: right;
margin-left: 250px;
}
.pageContent h2 {
margin-top: 25px;
margin-bottom: 3px;
font-size: 16px;
border-bottom: 1px dotted #CCC;
clear: both;
}
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.page {
position:relative;
width: 1010px;
padding: 0 5px 0 5px;
margin: 0 auto 30px auto;
}
.pageAttributes {
position:absolute;
left:0px;
top:0px;
width: 245px;
height: 250px;
margin-bottom: 20px;
background-color: #ccc;
}
.pageMenu {
margin-left: 250px;
height: 25px;
margin-bottom: -1px;
border-bottom: 1px solid #a7d7f9;
padding-left: 1px;
padding-right: 1px;
}
.pageMenu .button {
float: left;
margin-left: -1px;
height: 24px;
border-top: 1px solid #a7d7f9;
border-left: 1px solid #a7d7f9;
border-right: 1px solid #a7d7f9;
padding-left: 15px;
padding-right: 15px;
text-align: center;
line-height: 25px;
font-family: sans-serif;
font-size: 13px;
cursor: pointer;
}
.pageMenu .button.selected {
background-color: white;
border-bottom: 1px solid white;
cursor: default;
}
.pageMenu .search {
float: right;
margin-right: -1px;
height: 24px;
border-top: 1px solid #a7d7f9;
border-left: 1px solid #a7d7f9;
border-right: 1px solid #a7d7f9;
padding-left: 15px;
padding-right: 15px;
text-align: center;
line-height: 25px;
font-family: sans-serif;
font-size: 13px;
cursor: default;
}
.pageContent {
position: absolute;
width:748px;
border: 1px solid #a7d7f9;
margin-bottom: 5px;
padding: 5px;
background-color: white;
line-height: 1.5em;
overflow: auto;
clear: right;
margin-left: 250px;
}
.pageContent h2 {
margin-top: 25px;
margin-bottom: 3px;
font-size: 16px;
border-bottom: 1px dotted #CCC;
clear: both;
}
</style>
<div class="page">
<div class="pageAttributes">
.pageAttributes
</div>
<div class="pageMenu">
<div class="button">View</div>
<div class="button selected">Edit</div>
<div class="button">Talk</div>
<div class="search">Search:
<input type="text" id="searchItem" />
</div>
<div style="clear:both;"></div>
</div>
<div class="pageContent">
<h2>header</h2>
Lorem ipsum
<div class="pageFooter"></div>
</div>
</div>
#articleSections{
float: left;
}