Question

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 当我在第一个分区中点击手风琴时，桌子的右侧分区向下移动。我想将桌子保持在固定的位置。

当我点击其他手风琴时，仍然正确的分区向下移动。请建议我如何保持表格固定

Answer 1

尝试更改内容的顺序，以使#content2高于#content1。然后尝试尝试使用position {absolute}作为#content2。

你真的不应该使用像margin-top: -245px这样的东西。一般来说，你不应该使用保证金来定位你的元素。

在我的html内容页面中，分部正在向下移动

1 个答案: