主页 / 问题 / 910098
Accepted
ioprst
Asked:2020-11-22 18:55:02 +0000 UTC2020-11-22 18:55:02 +0000 UTC

将桌子推到容器顶部

  • 772

有一个页面

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>testPrj</title>
    <style>
        .wrapper {
          height: 100%;
          display: table;
          width: 100%;
        }

        .header {
          display: table-row;
          height: 1px;
        }

        .main {
          height: 100%;
          display: table;
          width: 100%;
        }

        .horizontalbar {
          display: table-row;
          height: 0px;
        }

        .box {
          display: table-cell;
        }

        .sidebar {
            width: 0px;
        }

        .sidebar table {
            /*height: 100%;*/
            width: 100%;
            position: relative;
            top: 0;
            border-collapse: collapse;
            /*display: block;*/
        }

        .sidebar table, th, td {
            border: 1px solid black;
        }

        .content {
          height: 100%;
        }

        .content iframe {
          width: 100%;
          height: 100%;
          border: none;
          margin: 0;
          padding: 0;
          display: block;
        }

        .footer {
          display: table-row;
          height:1px;
        }

        /* Basic Style*/
        * { 
            margin:0;
            padding:0;
        }

        html, body {
          height: 100%;
        }

    </style>
</head>

<body bgcolor="#FFFFFF">
    <div class="wrapper">

        <div class="header">
            <a href="testTable.html">Untitled</a>
        </div>

        <div class="main">

            <div class="horizontalbar"></div>

            <div class="box sidebar"></div>

            <div class="box content">
                <iframe frameborder="0" marginwidth="0" marginheight="0" src="test.svg" id="test_0Id"></iframe>
            </div>

            <!--<div class="box sidebar"></div>-->

            <div class="box sidebar">
                <table cellpadding="5">
                    <caption>Список переменных и их значения</caption>
                    <tr>
                        <th>Переменная</th>
                        <th>Значение</th>
                    </tr>
                    <tr>
                        <td>mon1</td>
                        <td><div contenteditable="true">false</div></td>
                    </tr>
                    <tr>
                        <td>mon2</td>
                        <td><div contenteditable="true">false</div></td>
                    </tr>
                </table>                
            </div>

            <div class="horizontalbar"></div>
        </div>

        <div class="footer">Footer text</div>

    </div>

    <script type="text/javascript" src="test_0.js"></script>
</body>
</html>

显示以下结果 在此处输入图像描述

像桌子一样（左下），抬起。尝试了各种位置（+顶部）选项，没有任何效果。

html

2 个回答

  1. Best Answer

    尝试简单地相对于其父元素垂直对齐元素

    .box {
    display: table-cell;
    vertical-align: top;
}
    • 1

  2. 尝试重置填充

    body {
    margin: 0;
    padding: 0;
}
    • 0

相关问题