Question

我尝试在左侧创建一个带有固定宽度列的双列布局，并使用一个响应列来占用右侧的剩余空间。这是一个例子：

<div>
  <div style="width:120px"></div>
  <div></div>
</div>

我已经在这方面工作了一段时间，但我似乎无法让它发挥作用。非常感谢帮助。谢谢！

Answer 1

有一个简单的解决方案，使用No TABLES和表格样式float和margin：

.sidebar { 
    width: 200px; 
    float: left; 
}
.content { 
    margin-left: 200px; 
}

示例：http://jsfiddle.net/NrFLf/

Answer 2

我在这个标记中看到2个CSS选项：

<div>
  <div class="col1"></div>
  <div></div>
</div>

选项1：

div {
overflow:hidden;
border:solid;/* for demo */
}
.col1 {
width:120px;
float:left;
}

选项2：

div {
display:table;
width:100%;
table-layout:fixed;
border:solid;/* for demo */
}
div div {
display:table-cell;
}
.col1 {
width:120px;
}

Answer 3

表格可以更好地处理网格布局，将表格设置为100％，将左侧列的静态宽度设置为@ 300px，右侧列将自动填充网格宽度。

Fiddle Here

<table border=1 width=100%>
    <tr>
        <td width=300px>...Static Column</td>
        <td>...Dynamic Column.</td>
    </tr>
    <tr>
        <td>Entry1</td>
        <td>Entry234189023452345</td>
    </tr>
    <tr>
        <td>Entry2</td>
        <td>You'll notice that the table cell only stretchs to the length of the text</td>
    </tr>
</table>

这很简单。

如何使用一个静态列和一个响应列创建网格布局？

3 个答案: