2

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

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

4

5 回答 5

3

这当然是可能的：我建议查看浮动（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;
}
于 2012-12-29T20:53:12.527 回答
0

你的意思是这样的吗？
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'。

于 2012-12-29T22:48:39.863 回答
0

Check out http://matthewjamestaylor.com/blog/perfect-3-column.htm

You would need to set the middle column to a fixed-width (px) instead of %.

于 2012-12-29T22:31:52.330 回答
0

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

三列布局：固定宽度中心与流体侧列

于 2012-12-29T22:09:35.797 回答
0

你可以试试这个...

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

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

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

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

希望它有效...

于 2012-12-29T21:02:03.363 回答