html - 将标题分为移动应用程序的 3 列(按钮、标题、按钮)

Question

我想创建一个 div 作为标题并分成 3 列，并按以下顺序在其中放置 2 个按钮和一个标题: Button1(左位) Title(居中) Button2(右位)

这是我为这个 div 编写的代码:

<div style="margin-top: 30px;border: solid 1px black;padding: 10px;">
            <div style="float: left;clear: both;"><span class="butonat">MENU</span></div>
            <div style="text-align: center;"><span style="color:#fff; text-shadow: none; font-family: Roboto;"> Kanali 1 </span></div>
            <div style="float: right;clear: both;"><span class="butonat">KANALI 2</span></div>
</div>

下面是显示的图像: http://i.imgur.com/vzfRC2t.png?1

我需要使用一种解决方案来解决这个问题，因为它的移动应用程序可以在移动设备上运行。

Answer 1

这不是一个好的做法，但如果您想保留当前的布局，解决方法是将最后一个 div 减去边距顶部，如下所示:

JsFiddle

 <div style="float: right;margin-top:-20px;"><span class="butonat">KANALI 2</span>

这是一个实际的例子。 给你的 wrapper 100% 宽度并将 3 个 child 的宽度除以 100 (33.33333333333333)。这将确保 children 会响应地调整大小。

JsFiddle Example

.header {
    margin-top: 30px;
    border: solid 1px black;
    width:100%;
    float:left;
}
.header div {
    float:left;
    width:33.33333333333333%;
}
.header .center {
    text-align:center;
}
.header .center span {
    color:#000;
    text-shadow: none;
    font-family: Roboto;
}
.header .right {
    text-align:right;
}
.header span {
    padding:10px;
    display:block;
}

<div class="header">
    <div class="menu">
        <span class="butonat">MENU</span>
    </div>
    <div class="center">
        <span>Kanali 1</span>
    </div>
    <div class="right">
        <span class="butonat">KANALI 2</span>
    </div>
</div>