Question

我需要一些div的帮助。

我目前有

<body>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</body>

我试图让它发生以下情况。

左侧div与屏幕左侧对齐，右侧与右侧对齐。然后主要是1000px宽，位于页面中间

|离开Div |主div 1000px宽|右div |

我已经看到这是使用表格完成的，但我宁愿使用div来创建我的布局。

主div将内部有其他div用于内容，所以我还需要左右divs高度与主div相同。

任何人都可以提供帮助吗？

此致梅森

Answer 1

您可以使用divs执行类似于表格的布局。查看table-* values for CSS display。

http://jsfiddle.net/MVSjr/

HTML

<div class="table">
    <div>
        <div id="left">test</div>
        <div id="center">test</div>
        <div id="right">test</div>
    </div>
</div>

CSS

#left {
    background:#F00
}
#center {
    background:#0F0;
    width: 300px;
}
#right {
    background:#00F
}
.table {
    display:table;
    width:100%;
}
.table > * {
    display:table-row;
}
.table > * > * {
    height: 200px;
    display:table-cell
}

Answer 2

您正在为您的网页寻找三列布局。三列布局可以是fixed或fluid。

在固定布局中，所有三列都具有固定宽度，当您重新调整浏览器屏幕大小时，它们将显示水平滚动条。

在流体布局中，所有三列的宽度均为屏幕宽度的百分比。以下是三列流体布局的示例。

<div class="left"></div>
<div class="main"></div>
<div class="right"></div>

和CSS

div{
    display:inline-block;
    height:500px;
}
.left,.right{
    background:red;
    width:15%;
}
.main{
    background:green;
    width:70%;
}

Js Fiddle Demo

Answer 3

如果您希望左/右div与主要div之间保持恒定距离，则必须指定它。我的建议是指定一个页面宽度，比如1300像素，然后根据需要拆分div的度量（例如：左边div为150px，中间为1000px，右边为150px。然后将包装div居中到页面。

.wrapper{
  width: 1300px;
  margin: auto;
}
.left{
  width:150px;
}
.main{
  width:1000px;
}
.right{
  width:150px;
}

您可能还需要考虑通过在内容允许的情况下指定宽度（％）或在媒体查询中指定断点来使其响应，但这只是一个想法...

3在网页上划分位置

3 个答案:

HTML

CSS