没有使用像素值的正确尺寸大小
我的情况如下。我有一个有两个孩子div的div。我想'事件'div是300px的宽度和高度。首先要求当'content'和'bar'元素使用父宽度的100%时,保持'event'div的大小。其次,到目前为止,'content'元素的边界不可见。是否可以在不使用硬编码值的情况下适应所有内容,并在大多数现代浏览器(FF,Chrome,Opera,IE7 +)中正确显示?没有使用像素值的正确尺寸大小
这是想什么我实现(注意左红酒吧,需要100%的高度,并且不与事件元件周围的灰色边框冲突):
这是我的。 HTML:
<div id="wrapper">
<div id="scheduler">
<div class="event" style="top: 30px; height: 300px; width: 300px">
<div class="bar"></div>
<div class="content">
<div class="inner-content">Some text</div>
</div>
</div>
</div>
</div>
,CSS:
#wrapper {
width: 600px;
height: 600px;
}
#scheduler {
background-color: #E1FFFE;
display: block;
height: 100%;
width: 100%;
padding: 0 10px;
position: relative;
}
#scheduler .event {
display: block;
float: left;
position: relative;
width:100%;
overflow:hidden;
}
#scheduler .event .bar {
background-color: red;
display: inline;
float: left;
height: 100%;
position: relative;
width: 5px;
}
#scheduler .event .content {
background-color: white;
border: 1px solid #CCCCCC;
border-left: none;
display: inline;
float: left;
height: 100%;
position: absolute;
width: 100%;
}
和一个可运行的演示:
我不认为我完全理解你的困惑,然而,唯一的区别是我可以在你期望的结果和你目前的工作之间侦测边界的存在 - 在#scheduler .event
上切换overflow:hidden;
到overflow:visible;
产生的东西在视觉上看起来像我达到了预期的效果。
是的,但尺寸增加了(不是计算的尺寸,至少在萤火虫中,但在视觉上它超出了原始边界) – 2013-03-05 21:16:49
试试这个。与.bar
依然代码到位:取出bar
格,然后.content
CSS更改为:
#scheduler .event .content {
background-color: white;
border: 1px solid #CCCCCC;
border-left: 5px solid red; // replaces the bar
display: inline;
float: left;
height: 99%; // a bit of a hack to fit the border in
position: relative;
width: 98%; // hack
}
编辑
#scheduler .event .bar {
background-color: red;
display: inline;
float: left;
height: 99.9%; /* Small offset at bottom */
position: relative;
width: 5px;
}
#scheduler .event .content {
background-color: white;
/* revised border */
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
display: inline;
float: left;
height: 99%;
position: absolute;
width: 98%;
}
我相当确定,可以在没有任何形式的黑客的情况下实现预期的结果,并且所有这些代码可以大大简化 - 虽然我太忙了,但并没有真正理解足以继续进行的预期结果,因此更多的工作将尝试解码OP的实际意义。如果在原始问题中解释得更好,我觉得我们都可以创建一个解决方案,它只覆盖CSS中的少数几行:/ +1,尽管在这种情况下提供了最佳的SO能力。 – ChaseMoskal 2013-03-05 21:34:19
如果我将边框替换为边框,顶边框和左边框会碰撞,我试图避免。 – 2013-03-05 23:44:47
我非常感谢提供的jsFiddle!不幸的是,快速阅读你的问题,我无法理解你想要的结果,或者你当前的jsFiddle不满意。你想保留边界吗? – ChaseMoskal 2013-03-05 18:40:29
是的,显示边界,但保持'事件'分区300x300。如果'overflow:hidden'被删除,则边框可见但尺寸增加。 – 2013-03-05 21:16:04
也许看看'box-sizing:border-box;'?? – ChaseMoskal 2013-03-05 21:36:06