html - <div> 被忽略

Question

我试图让两个固定边框(基本上是黑色矩形)出现在浏览器中。一个边框应该在窗口的最左边，一个应该在最右边。我在样式表中编写了单独的 CSS 类(每个边框 1 个)。

在 html 文件中，我在内部分别调用了两个类 <div></div> .问题是由于某种原因，实际上一次只会显示 2 个中的 1 个。只有第一个(the2)<div>在程序中似乎运行；如果我注释掉 <div> #1，其他<div>会运行良好，所以我怀疑这是类(class)的问题。另外其他<div></div>对于 HTML 中存在的不同事物，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

它们都出现在我的浏览器中(假定它们相距 1300 像素)。不确定你到底想在这里实现什么，但我建议用 float 替换你的边距:

.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>