Question

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

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元素向右浮动内容

你应该在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中具有Action菜单并且具有width属性，那么同一div上的填充可能会在resoultion中断，然后具有.ActionContent并具有填充

Answer 2

请替换这些css行

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

Answer 3

您正在使用类选择器来选择ID。将id="ActionsContent"替换为class="ActionsContent"或将.ActionsContent替换为#ActionsContent应确保实际应用这些样式;）

简单的2列布局

3 个答案:

DEMO