css - 简单的 2 列布局

Question

我想要一个包含两列的网页。第一个用于按钮，第二个用于内容。

这是一个 JsFiddle :

HTML:

<div data-role="page" data-theme="b" id="home">
<div data-role="header" data-position="fixed">
    <div class="home-header">
        <div class="content-header" data-tap-toggle="false">
            Header
        </div>
    </div>  
</div> 
<div data-role="content">
    <div>
        <div class="ActionsMenu">       
            <button>button</button>
            <button>button</button>
            <button>button</button>
            <button>button</button>
        </div>

        <div id="ActionsContent">
            <h3 class="ui-bar ui-bar-a ui-corner-all">Heading</h3>
      <div class="ui-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
      </div>
        </div>
    </div>
</div>

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    footer
</div>

CSS:

.ActionsMenu {
    width: 100%;
    float: none;
}
.ActionsContent {
    width: 100%;
    float: none;
}

@media all and (min-width: 400px) {
    .ActionsMenu {
      float: left;
      width: 25%;
      padding-right: 50px;

    }
    .ActionsContent {
      float: none;
      margin-left: 25%;
    }
}

如你所见，内容在按钮下面，而不是我需要的地方......

该页面还需要响应并为移动设备显示单个列...

Answer 1

DEMO

为两个 div 定义宽度 prpperty。

当你要进行响应式设计时，我建议使用 % widths

.MainContent .ActionsMenu {
    width: 25%;
    float: none;
    overflow-scrolling: auto;
}
.MainContent .ActionsContent {
    width: 60%;
    float: right;
}

有 float 元素使内容 float

并且您应该在 HTML 中有一个 id ActionsMenu 而不是类。

<div class="ActionsMenu"> ..</div>

编辑:你想右对齐- http://jsfiddle.net/VT9m3/11/在此基础上添加填充

.ActionsContent {
      float: left;
        width:65%;
    padding-left:20px;
    }

但是，如果 .ActionsMenu+.Actionscontent+padding >100% 的宽度，您在同一个 div 上的填充可能会在解决时中断，所以在另一个 div 中设置 Action 菜单并为其设置 width 属性然后有 .ActionContent 和填充