时间戳

首页 > 解决方案 > 按此顺序显示 .div 或图像

html - 按此顺序显示 .div 或图像

问题描述

如何按此顺序定位某些内容。这就是我想要实现的

这就是我现在所拥有的

有人可以向我解释我如何很好地有序地向上移动吗？

            <div class="middle">
            <div id="middletop">
                <img style="padding-left: 5px;padding-top:6px;" src="img/slider.png"/>
                    <a href="" class="downloadbutton" title="Pobierz grę"></a>
                    <a href="" class="signbutton" title="Zarejestruj się"></a>
                    <div class="channels">
                        <img src="img/status.png"/></br>
                        <img src="img/status.png"/></br>
                        <img src="img/status.png"/></br>
                        <img src="img/status.png"/>
                    </div>
            </div>
        </div>

CSS 代码

.middle
{
   background: url('../img/middlebg.png') no-repeat center;
   width: 1009px;
   margin-top: 370px;
   margin-left: auto;
   margin-right: auto;
   height: 1536px;
   position: relative;
}

#middletop {
   display: absolute;

}
.downloadbutton {
   background: url('../img/download.png') top no-repeat;
   width: 198px;
   height: 67px;
   display: inline-block;
}.downloadbutton:hover {
   background: url('../img/download_hover.png') top no-repeat;
}
.signbutton {
   background: url('../img/sign.png') top no-repeat;
   width: 122px;
   height: 67px;
   display: inline-block;
}
.signbutton:hover {
   background: url('../img/sign_hover.png') top no-repeat;
}

.channels {
}

标签： htmlcss

解决方案

根据您给我们的示例，我能够创建一个易于使用和（希望）理解的布局。

布局

我使用表格来创建网格。这样您就不必考虑位置的使用，因为网格内的每个元素都会自动放置。

<body>

    <table>
      <tr>
        <td class="container">
            <div id="slider">Slider</div>
        </td>
        <td class="container">
            <table>
                <tr>
                    <td>
                        <button id="button1">button1</button>
                    </td>
                    <td>
                        <button id="button2">button2</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input placeholder="something1" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input placeholder="something2" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input placeholder="something3" />
                    </td>
                </tr>
            </table>
        </td>
      </tr>
    </table>

</body>

造型

        table {
          border-collapse: collapse;
          width: 100%;
          border: none;
        }

        td, tr {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 8px;
        }

        table,
        td, tr {
            border: none;
        }

        td {
            text-align: center;
        }

        .container {
            width: 50%;
        }

        #slider {
            width: 90%;
            height: 150px;
            border: 1px solid black;
        }

        input {
            width: 90%;
        }

推荐阅读