-1
本质上，我试图使用<Div>标签创建底部边框以分隔页面上的不同内容，但是当我滚动到底部并在其中插入div以将它们分开时，它会忽略我已经放置的其他标签并将其自身附加到先前的div分隔符。尝试使用div作为不同部分的分隔符
我该如何解决这个问题？我试过使用人力资源标签，但它也做了同样的事情。
这是我的代码：
div {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
margin: 0 auto;
}
#leftcolumn,
#rightcolumn {
border: none;
float: left;
min-height: 450px;
color: white;
}
#leftcolumn {
width: 50%;
}
.container {
margin-left: 10%;
width: 40%;
text-align: center;
}
#rightcolumn {
/* height: 100%;*/
width: 40%;
float: right;
background-color: #c9ccc9;
}
.border {
border-bottom: 40px solid #8dc43f;
}
p {
color: black;
}
.infotext {
color: #8dc43f;
margin-left: 30%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitle {
color: #8dc43f;
margin-left: 25%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlepower {
color: #8dc43f;
margin-left: 36%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlecomm {
color: #8dc43f;
margin-left: 17%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.bluetags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 176px;
margin-top: 4px;
}
.greentags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 180px;
margin-top: -26px;
}
.orangetags {
width: 280px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 175px;
margin-top: -15px;
}
.image {
position: relative;
width: 80%;
/* for IE 6 */
}
.titleimg {
margin-left: -60%;
margin-right: 10%;
}
imagetext {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.bgimg {
background-size: cover;
width: 100%;
height: 60%;
border-collapse: collapse;
display: block;
margin: 0;
padding: 0;
}
#container {
height: 400px;
width: 400px;
position: relative;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 43%;
top: 25%;
font-family: 'ABeeZee', sans-serif;
}
#secondtext {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 37%;
top: 30%;
font-family: 'ABeeZee', sans-serif;
}<div id="cssmenu">
<ul>
<img src="turtletag.png" class="titleimg">
<li><a href="#backtotop"><span>Home</span></a>
</li>
<li><a href="#features"><span>Features</span></a>
</li>
<li><a href="#app"><span>App</span></a>
</li>
<li><a href="#products"><span>Products</span></a>
</li>
<li><a href="#"><span>Support</span></a>
</li>
</ul>
</div>
<img src="googlestore.png" style="position:absolute; top:210px;left:70px; width: 10%;">
<img src="appstore.png" style="position:absolute; top:320px; left:77px; width:10%;">
<a href="#" class="myButton">Order Tags</a>
<img src="iPhone5_Mockup_Template_Free_by_Ray.png" class="bgimg">
<p id="text">Turtle Tags</p>
<p id="secondtext">Always connected to the nest</p>
<div class="border"></div>
<div id="leftcolumn">
<div class="mainbody">
<img src="bluetags.png" class="bluetags hvr-float">
</div>
<div class="mainbody">
<img src="greentags.png" class="greentags hvr-float">
</div>
<div class="mainbody">
<img src="orangetag.png" class="orangetags hvr-float">
</div>
</div>
<a name="features"></a>
<div id="rightcolumn">
<h2 class="infotext">Features</h2>
<hr class="newstyle">
<img src="battery.png" style="margin-left:40%; width:15%">
<p class="infotexttitle">Long battery life</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse
potenti.
</p>
<img src="speaker-xxl.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitle">Noise Notifications</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="powericon.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlepower">Always on</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="twoway.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlecomm">Two way communication</p>
<p rows="4" columns="4" style="width:350px; margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
</div>我试图改变CSS和我找不到任何会导致它，但是一个新的一双眼睛也能找到我不能做的事情。
创建[小提琴]（https://jsfiddle.net/），它的工作原理，使得其更容易进行这项工作。 –
只需粘贴整个代码就很难诊断问题。我复制/粘贴到jsfiddle，但我仍然不知道你想要什么。 https://jsfiddle.net/ahmadabdul3/ghogvcsx/3/ –
@AbdulAhmad您在顶部看到的绿色边框我试图在页面底部找到它，以及我可以分隔页面的两个部分，但是当再次使用div时，它会添加到顶部的绿色边框中，使其尺寸加倍 –