HTML，3 列布局答案

【问题标题】：HTML, 3 columns layoutHTML，3 列布局
【发布时间】：2012-12-30 06:48:39
【问题描述】：

大家好，我需要帮助我将我的网站从表格更改为 div

我的问题是我的网站需要 3 个内联 div 我需要一个 div 在页面中心 788px 其他 2 个在左右它们将有一个重复的背景图像，根据屏幕分辨率增加和减少但是中心的 div 必须保持相同的大小，并且无论分辨率如何，它都必须保持在页面的中心。这可以使用 div 吗？

【问题讨论】：

请粘贴您的示例，您尝试了什么？？
一切皆有可能，但只要您向我们展示您的代码并查看其中有什么问题，我们就可以提供帮助

标签： css html inline

【解决方案1】：

这当然是可能的：我建议看看浮动（http://www.w3schools.com/css/css_float.asp）和背景图片（http://www.w3schools.com/cssref/pr_background-image.asp）

设置背景图片：

<div style="background-image:url('location/image.ext');">

查看背景重复：http://www.w3schools.com/cssref/pr_background-repeat.asp

至于 3 列布局示例，网上有很多，一个简单的在这里找到：http://www.electrictoolbox.com/basic-3-column-fixed-width-css-layout/

    <div id="container">

    <div id="left">
    </div>

    <div id="right">
    </div>

    <div id="content">
    </div>

    <div class="clear"></div>

    <div id="footer">
    </div>

</div>

#container {
    width: 700px;
}

#left {
    float: left;
    width: 150px;
}

#content {
    padding: 0 210px 0 160px;
}

#right {
    float: right;
    width: 200px;
}

.clear {
    clear: both;
}

【讨论】：

您能详细说明一下吗？
单方面的观点，你错过了它拥有的大量正确的代码。我用于 w3c 的链接都是有效/正确的。不确定宣传在这里有什么地方

【解决方案2】：

你可以试试这个……

为每个 div 设置单独的 id，并尝试使用像素而不是百分比来表示值...并将位置用作相对或固定...这样当浏览器缩小时它不会改变...

例如。比如说，你有一个中心 div 的 ID 为 #center_div...然后试试这个...

#center_div{
position:relative (or fixed);
width: (value)px;
height: (value)px;
display: block;
}

如果您希望中心 div 出现在其他两个 div 之上...只需使用 z-index 属性...

希望它有效...

【讨论】：

【解决方案3】：

你想要的（固定中心的液体面）已经在另一个 SO 帖子中得到了回答：

Three column layout: fixed width center with fluid side columns

【讨论】：

【解决方案4】：

查看http://matthewjamestaylor.com/blog/perfect-3-column.htm

您需要将中间列设置为固定宽度 (px) 而不是 %。

【讨论】：

【解决方案5】：

你的意思是这样吗？
http://jsfiddle.net/UY5XY/5/

<div id="containter">
    <div id="left">LEFT</div>
    <div id="center">CENTER</div>
    <div id="right">RIGHT</div>
</div>

CSS：

#containter div {
    position:relative;
    text-align:center;
    width:100%;
    height:auto;
}
#containter div {
    position:absolute;
    text-align:left;
    width:100px;
    height:100px;
    display:block;
}
#left {
    left:0;            
}
#center {
    width:10%;
    margin:0 40%;
}
#right {
    right:0;   
}

-> IE 的文本对齐（应该没问题）
-> 边距：左右为 0
-> 中心边距是百分比值，但可以是例如。 50px，但你应该让中心边距也像'margin：0 50px'。

【讨论】：