Question

我有一个我正在使用的日历，它远远超出容器。我已经尝试将溢出更改为隐藏，在容器外添加包装div，切换到相对定位等等，但它仍然不会保留在表的参数内。这是我小提琴的链接...你会注意到3天会议的内容并没有在单元格内结束，而是延伸过去。

这是css部分，html部分很长而且难以处理日历。

<style type="text/css">
    .days.theWeekend {
        background: #333;
    }
    .main {
        width: 1863px;    }
    .month {
        background-color: black;
        font: bold 12px verdana;
        padding: 5px;
        color: white;
    }
    .daysofweek {
        background-color: gray;
        font: bold 12px verdana;
        color: white;
        float: left;
        width: 49px;
        border-right: 1px solid #EEEEEE;
        text-align: center;
    }
    .days {
        font-size: 12px;
        font-family: verdana;
        color: black;
        background-color: #fff;
        float: left;
        width: 49px;
        border-right: 1px solid #EEEEEE;
        height: 100px;
        text-align: center;
        overflow: visible;
    }
    .days #today {
        font-weight: bold;
        color: red;
    }
    .eventBar {
        /* width: initial !important; */
        height: 18px;
        background-color: red;
        /*          margin: 10px 0 0 2px; */
        position: absolute;
        color: #fff;
        text-align: center;
    }

    .eventBar > a {   
        color: #fff;
    }

    .eventBarPurple {
        height: 18px;
        background-color: red;
        margin: 10px 0 0 2px;
        position: absolute;
        color: #fff;
        text-align: center;
    }

    .eventBarPurple > a {   
        color: #fff;
    }
    .eventBar.thisSiteOrigin {
        background: #0022ff;
    }

    span.monthNumber {
        display: block;
    }

    .ms-rte-embedcode.ms-rte-embedwp {
        width: 2000px;
    }

    table.main {
        width: 100%;
    }
</style>

https://jsfiddle.net/t0zj6e5w/

Answer 1

需要添加以下css：

table#calendar {
overflow: hidden;
position: absolute;
}

div#tablewrapper {
position: relative;
}

Answer 2

将.eventBar的宽度设置为100% !important，将高度设置为自动。然后为positon:relative

设置.days

.days {
    font-size: 12px;
    font-family: verdana;
    color: black;
    background-color: #fff;
    float: left;
    width: 49px;
    border-right: 1px solid #EEEEEE;
    height: 100px;
    text-align: center;
    position: relative;
    overflow: visible;
}
.eventBar {
    width: 100% !important;
    height: auto;
    padding: 5px 0;
    background-color: red;
    /* margin: 10px 0 0 2px; */
    position: absolute;
    color: #fff;
    text-align: center;
}

还要使列的宽度更长，以便文本不会被切断。以下是示例fiddle。希望这可以帮助你。

我桌子内的绝对位置Div超出了表和包装div

2 个答案: