0

我的情况如下。我有一个带有两个子 div 的 div。我希望“事件” div 的宽度和高度为 300 像素。第一个要求是当 'content' 和 'bar' 元素使用 100% 的父级宽度时，保持 'event' div 的大小。其次，就目前而言，“内容”元素的边框不可见。是否可以在不使用硬编码值的情况下将所有内容都放入其中并在大多数现代浏览器（FF、Chrome、Opera、IE7+）中正确显示？

这就是我想要实现的（注意左边的红色条，它占据 100% 的高度并且不会与事件元素周围的灰色边框发生冲突）：

在此处输入图像描述

这就是我所拥有的。网页：

在此处输入图像描述

<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%;
}

和一个可运行的演示：

http://jsfiddle.net/6nTvD/1/

4

2 回答 2

1

尝试这个。取出bardiv，然后把.contentcss改成：

#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
}

http://jsfiddle.net/Dp3yz/

编辑：.bar仍然存在的代码：

#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%;
}

新版本：http: //jsfiddle.net/JJrC9/1/

于 2013-03-05T18:46:30.260 回答
0

但是，我认为我并不完全理解您的困境，我可以窥探到您想要的结果与您当前的工作之间的唯一区别是边界的存在-overflow:hidden;打开#scheduler .event以overflow:visible;产生在我看来似乎达到了想要的影响。

于 2013-03-05T18:43:05.650 回答