Question

找到了这个包含不同布局示例的精彩网站

特别是这一个：link text

（查看完整css和标记的来源）

我只是在学习css而无法找到哪里可以修改边距的宽度（左边和中间列）

此布局中的每个值都与另一个值相关联，因此如果我在一个地方更改，则会更改其他位置。

Answer 1

第一步：为Firefox安装Firebug。

您需要更改三个连接值：侧边栏的width和right（.col2）以及中间列的left值（{ {1}}）。

例如，请尝试以下更改：

.colright

这会更改侧边栏的宽度，但不会更改文本宽度（因此文本的边距会更大）。

Answer 2

左边的那个由以下人员控制：

.leftmenu .col2 {
    float:left;
    width:170px;
    position:relative;
    right:185px;
}

注意： right值大于宽度，这是控制该列左侧间距的值。您还需要更改保证金的最后一个值。

.leftmenu .col1 {
    margin:0 15px 0 215px;
    overflow:hidden;
    position:relative;
    right:100%;
}

和200px left数字：

.leftmenu .colright {
    background:#FFFFFF none repeat scroll 0 0;
    float:left;
    left:200px;
    position:relative;
    width:200%;
}

注意模式？左边15个像素，然后170个像素的内容= 170和185.在右边添加15个像素，转到下一列，然后再添加15个像素，你就是215像素。