浮动div中的边框问题

问题描述

继续讨论在我的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下面，而不是与分隔符并排显示在中间。

解决方案

边界使用 border-right 试试这个

  #passageDiv {
 border-right：2px纯黑色; 
} 
  

也减少了宽度 百分比有点占用边界

  #passageDiv {
 width：48％; 
} 
 
 #questionDiv {
 width：48％; 
} 
  

Further to the discussion in Floating div issue in IE i added Floating div in my JSP

Now I need to add a ruler-type of thick border only to my right of the "PassageDiv". CSS given below

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

#passageDiv{
    width: 50%;
}


#questionDiv {
    width: 50%;
}

Kind of seperator between PassageDiv and QuestionDiv am expecting. So I added below line in passageDiv

border: 1px solid;

But adding this makes my questionDiv to appear below passageDiv rather than appearing side-by-side with an seperator in middle.

解决方案

border will add border all around, just make use of border-right try this

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

also decrease the width percentage a little to occupy border

#passageDiv{
    width: 48%;
}

#questionDiv {
    width: 48%;
}

这篇关于浮动div中的边框问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！