-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時，它會添加到頂部的綠色邊框中，使其尺寸加倍 –