0

我有一个设置宽度（以像素为单位）的 div，以margin: auto;. 如何将元素定位到此 div 的左侧或右侧，宽度动态调整为中心 div 的边距有多宽？

谢谢你的帮助！

编辑：更多信息...

基本上，它是以下设置：

<div></div>
<div style="margin:auto; width: 950px">content goes here</div>
<div></div>

我想在中心 div 的左侧和右侧具有相同的背景图像，但在中心 div 中具有不同的背景图像。那么如何将左右 div 与中心 div 的左右对齐，宽度覆盖中心 div 的整个边距。

4

3 回答 3

1

如果它只是背景，你可以这样做：

<div style="background: url('path/to/image.jpg'); background-size: cover; position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
  <div style="margin:auto; width: 950px">content goes here</div>
</div>

它将背景投影到背景 div 上。然后在内部 div 上，您可以指定另一个背景，它将覆盖父 div 的背景。

于 2012-11-22T09:34:54.797 回答
1

这也应该有效......我已经缩小了宽度（以适应 jsfiddle http://jsfiddle.net/Neograph734/Vb4Hm/1/）。如果您应该同时编辑左边距。

<div style="margin:auto; width: 250px; background: red;">    
  <div id="left_sidebar" style="float: left; width: 200px; margin-left: -200px;">
    <div id="right_sidebar" style="float: left; width: 200px; margin-left: 450px;">

    </div>
  </div>

Content here

</div>

更新：内容应在浮动 div 下方

于 2012-11-22T10:11:02.033 回答
1

解决方案1：

很容易解决这个问题table，就这样使用

<table width="100%">
   <tr>
       <td background="your/image/url5">content...</td>
       <td width="950" background="your/image/url">content goes here...</td>
       <td background="your/image/url5">content...</td>
  </tr>
</table>

您可以使用所有三个块来编写内容，也可以使用不同的内容

解决方案2：

如果你需要 with div，那么你需要为此编写一点 jQuery

html：

<div class="left"></div>
<div class="center">content goes here...</div>
<div class="right"></div>

CSS：

<style>
.left{
    background:url(your/image);
    float:left;
}
.center{
    background:url(your/image);
    float:left;
    width:950px;
}
.right{
    background:url(your/image);
    float:left;
}
</style>

jQuery :

<script type="text/javascript">
    var window_width = $(window).width(); // get window width
    var total_remain = $(window).width()-950; // (-) your center div width
    var apply_width = total_remain / 2; // get remaining and divide by 2
    $(".left").css("width","apply_width"); // appying the width to the right / left
    $(".right").css("width","apply_width"); // appying the width to the right / left
</script>
于 2012-11-22T10:18:41.210 回答