我试图在浏览器中显示两个固定边框(基本上是黑色矩形)。一个边界应位于窗口的最左侧,一个应位于最右侧。我在样式表中编写了单独的CSS类(每个边框1个)。
在html文件中,我在两个单独的<div></div>
内调用了这两个类。问题在于,出于某种原因,一次只会实际显示2个中的1个。只有程序中的第一个(2)<div>
似乎运行;如果我评论<div>
#1,那么另一个<div>
将运行良好,所以我怀疑它是类的问题。另外,HTML中存在用于不同事物的其他<div></div>
,DO正常运行。
以下是样式表中的两个类:
.sidescreenBars1{
border-style: solid;
color:rgb(0,0,0);
background:rgb(0,0,0);
height:100.8%;
width:80px;
margin-left:1489px;}
.sidescreenBars2{
border-style: solid;
color:rgb(0,0,0);
background:rgb(0,0,0);
height:100.8%;
width:80px;
margin-left: 100px;}
以下是HTML文件中的类:
<!--Setting the right toolbar(border)on the screen-->
<div class="sidescreenBars1">
</div>
<!--Setting the left toolbar(border)on the screen-->
<div class="sidescreenBars2">
</div>
答案 0 :(得分:2)
它们都出现在我的浏览器中(授予它们相距1300px)。不确定你到底想要实现的目标,但我建议用浮点数替换你的边距:
.sidescreenBars1{
border-style: solid;
color:rgb(0,0,0);
background:rgb(0,0,0);
height:100.8%;
width:80px;
/* margin-left:1489px; */
float:right;
}
.sidescreenBars2{
border-style: solid;
color:rgb(0,0,0);
background:rgb(0,0,0);
height:100.8%;
width:80px;
/* margin-left: 100px;*/
float:left;
}
然后将它们包裹在100%宽度的div中。这将使他们在不同浏览器宽度的响应下保持在远端。
<div style="width: 100%;">
<!--Setting the right toolbar(border)on the screen-->
<div class="sidescreenBars1">
</div>
<!--Setting the left toolbar(border)on the screen-->
<div class="sidescreenBars2">
</div>
</div>