用 margin:auto 定位 div 的左右元素

Question

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

感谢您的帮助！

编辑：更多信息...

基本上是这样的设置：

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

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

Answer 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 下方

Answer 2

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

<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 的背景。

Answer 3

解决方案 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：

如果你需要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>