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

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

<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 2

这应该也可以...我已经使宽度变小（适合jsfiddle http://jsfiddle.net/Neograph734/Vb4Hm/1/）。如果你应该编辑两个margin-left。

<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 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>

使用margin定位元素左右两边的元素：auto

3 个答案: