-1
button.accordion {
background-color: #eee;
color: #1874F1;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\02795';
font-size: 15px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2796";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
width: 90%;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
#content2 {
margin-right: 10%;
margin-left: 70%;
margin-top: -245px;
height: 100px;
}
#content2.fixed {
position: fixed;
}
#table table,
td,
th {
border: 1px solid #1874F1;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: #1874F1;
}
th,
td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #1874F1;
}
tr:hover {
background-color: #ddd;
}
a:link {
text-decoration: none;
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="content1">
<h2><font color="#1874F1">Custom Web
Development</font></h2><button class="accordion">What Bluepetal
Does?</button>
<div class="panel">
<br>
<p><font color="black" size="3">Bluepetal has a reputation for
creating innovative custom web applications that meet and exceed
expectations. Our specialized custom web application development
engineers offer the highest level of usability, scalability and
complete compatibility in browsers and platforms. Each of our
modules is designed to fit into a framework that is mindful of
usability, performance, security and auditing. Since every company
is unique with its own specific needs, we invest a considerable
amount of time trying to learn how the business works so we can
propose unique and innovative options for the clients.</font></p>
</div><button class="accordion">Web application</button>
<div class="panel">
<br>
<p><font color="black" size="3">There are three main parts as to
what custom web application development is all about. It’s the
planning, the creation and the maintaining of web-based software.
Custom data applications as the most popular type of application we
create, these include business processes automation, Customer
relationship management system, custom ecommerce software and one
of a kind applications build for a specific purpose. Every custom
application is expected to integrate with other softwares so as to
avoid double entry and make the process efficient, we work with
most book keeping and ERP systems including Quickbooks, Sage,
Navision and Microsoft Great Plains.</font></p>
</div><button class="accordion">Services</button>
<div class="panel">
<br>
<p><font color="black" size="3">All our web applications are
responsive to support cell phones and tablets natively, our testing
team evaluates usability on physical mobile devices to ensure our
systems can be effectively used in any environment.(Pulse possesses
a library of over 2000 modules built by inhouse engineers, these
including PDF manipulation, media manipulation, social networking,
integration with ERP systems like SAP, mainframe plugins, office
automation systems like Visual)</font></p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++)
{
acc[i].onclick = function()
{
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
</div>
<div id="content2">
<table>
<tr>
<th><font color="white">Other Web Development
Services</font></th>
</tr>
<tr>
<td>
<a href="ad.html"><span><img src=
"images/appdev1.png"></span>Application development</a>
</td>
</tr>
<tr>
<td>
<a href="epd.html"><span><img src="images/ent.png"></span>
Enterprise portal development</a>
</td>
</tr>
<tr>
<td>
<a href="ecs.html"><span><img src=
"images/E-Commerce-Icon.png"></span> Ecommerce
solutions-B2B/B2C</a>
</td>
</tr>
<tr>
<td>
<a href="fasm.html"><span><img src="images/fb.png"></span>
Facebook apps & Social media</a>
</td>
</tr>
<tr>
<td>
<a href="ecw.html"><span><img src=
"images/e_c.png"></span>Ecommerce websites</a>
</td>
</tr>
</table>
</div>
</body>
</html>1st image 최종 도면 미세 절대적이다.
2nd image 나는 첫 번째 부문에서 아코디언을 클릭하면서
는 테이블의 오른쪽 부문은 고정 된 위치에 테이블을 유지하려는 downwards.i 움직이고있다.
다른 아코디언을 클릭해도 오른쪽 구획이 아래쪽으로 움직입니다. 테이블을 고정하는 방법을 제안하십시오.
문제를 재현하는 jsfiddle 및 언급하신 "첫 번째 이미지"를 이상적으로 제시하십시오. – apokryfos
# content2가 # content1보다 위에 있도록 내용 순서를 변경해보세요. 그런 다음 # content2의 절대 위치로 실험 해보십시오. –
그리고 margin-top : -245px와 같은 것을 사용해서는 안됩니다. 일반적으로 요소를 배치하는 데 여백을 사용하면 안됩니다. –