将 header 分为移动应用程序的 3 列（按钮、标题、按钮）

Question

我想在 3 列中创建一个 div 作为 header 和 divide 并放置 2 个按钮和一个标题 inside它按此顺序： 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>

这是一个实际的例子。给你的包装器 100% 宽度和 divide 3 children 的宽度 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>

将 header 分为移动应用程序的 3 列（按钮、标题、按钮）

Dividing header to 3 columns for mobile app (button,title,button)

html

css

jquery-mobile