Question

继Floating div issue in IE中的讨论之后，我在JSP中添加了Floating div

现在我需要在“PassageDiv”的右边添加一个标尺类型的粗边框。下面给出的CSS

#passageDiv, #questionDiv {
    overflow: auto;
    float: left;
    height: 550px;
}

#passageDiv{
    width: 50%;
}


#questionDiv {
    width: 50%;
}

期待PassageDiv和QuestionDiv之间的分离。所以我在passageDiv中添加了以下行

border: 1px solid;

但是添加这个使得我的问题显示在passageDiv下面，而不是与中间的分隔符并排出现。

Answer 1

border将添加边框，只需使用border-right试试此

#passageDiv{
  border-right: 2px solid black;
}

还会使width percentage稍微减少以占用border

#passageDiv{
    width: 48%;
}

#questionDiv {
    width: 48%;
}

Answer 2

选中 fiddle ，我不是那样的问题，

#passageDiv, #questionDiv {
    overflow: auto;
    float: left;
    height: 50px;
    width: 50%;
}

#passageDiv {
    border-right: 1px solid #ccc;
}

浮动div中的边界问题

2 个答案: