Question

我试图在浏览器中显示两个固定边框（基本上是黑色矩形）。一个边界应位于窗口的最左侧，一个应位于最右侧。我在样式表中编写了单独的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>

Answer 1

它们都出现在我的浏览器中（授予它们相距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>

<div>被忽略了

1 个答案: