，師向下移動

-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 雖然我在第一部分點擊手風琴，但表格的右邊劃分向下移動。我想將表格保持在固定的位置。

雖然我點擊其他手風琴仍然右分區正在向下移動。請建議我如何保持表格固定

來源

2016-06-21 Anuroop.k

請提供代碼，理想情況下用jsfiddle來重現問題和（可選）您提到的「第一張圖片」。 – apokryfos

嘗試更改內容的順序，以便＃content2高於＃content1。然後嘗試對＃content2進行位置絕對測試。 –

而你真的不應該使用諸如margin-top之類的東西：-245px。一般來說，你不應該使用保證金來定位你的元素。 –

請嘗試更改您的內容的順序，以便您的#content2高於您的#content1。然後嘗試使用#content2的絕對位置進行試驗。

而你真的不應該使用像margin-top: -245px這樣的東西。一般來說，你不應該使用保證金來定位你的元素。

來源

2016-06-22 13:41:58

，師向下移動

回答

相關問題