Question

CSS：

.jC2_Container{
}
.jC2_EventWrapper
{
    border-right:1px solid #CDC3FF;
    height:20px;
    width:250px;
}
.jC2_EventNum
{
    float:left;
    font-family: Arial, verdana;
    text-align:center;
    font-size:12px;
    background-color: #ffffff;
    color:#c0c0c0;
    width:20px;
    height:20px;
    line-height:20px;
}
.jC2_EventObject
{
    font-family: Arial, verdana;
    font-size:12px;
    background-color:#F3F1FF;
    padding-left:30px;
    float:left;
    height:20px;
    line-height:20px;
    border-left:5px solid #CDC3FF;
    border-top:1px solid #CDC3FF;
    padding-right:20px;
}
.jC2_Break{
    width: 1px;
    height: 16px;
    background-color:#CDC3FF;
    float:left;
}
.jC2_EventDescription{
    float:left;
    font-family: Arial, verdana;
    font-size:12px;
    border-top:1px solid #CDC3FF;
    line-height:20px;
    padding-left:20px;
    display:inline-block;
}

HTML：

<div class="jC2_Container">
    <div class="jC2_EventWrapper">
        <div class="jC2_EventNum">1</div>
        <div class="jC2_EventObject">System</div>
        <div class="jC2_Break"></div>
        <div class="jC2_EventDescription">Every tick</div>
    </div>
</div>

“每个嘀嗒”上方的顶部边框需要延伸到最右边界，我有点卡住，任何人都可以帮忙吗？

编辑在与其他几个人讨论后，我们认为你真的只需要CSS和这里有问题的<div>，然后是下面的JSFiddle

Answer 1

您必须设置 .jC2_EventObject 和 .jC2_EventDescription 的宽度。

Wrapper's width is : 250px.

EventNum's width is : 20px.
Break's width is : 1px;
So, EventObject + EventDescription's total width should be : 250-21=229px
ALSO , YOU HAVE TO CALCULATE paddings, borders etc. Welcome to REAL WORLD !

：）

CSS边框扩展

1 个答案: