定位元素左侧和右侧的div带边距：auto [英] positioning elements left and right of a div with margin:auto

问题描述

我有一个div，以 margin：auto; 为中心的设置宽度（以像素为单位）。如何将元素放置在此div的左侧或右侧，宽度是动态调整，但中心div的边缘宽度是多少？

I have a div with a set width (in pixels) that is centered by margin: auto;. How can I position an element to the left or right of this div, with a width that is dynamically adjusting to however wide the margin of the center div is?

感谢您的帮助！

基本上，编辑：更多信息...

more info...

基本上，它的设置如下：

basically, it's the following setup:

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

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

I want to have the same background image on the left and right of the center div, but a different one in the center div. So how do I align the left and right divs to the, well, left and right of the center div, with a width that covers the entire margin of the center div.

推荐答案

这应该能工作...我已经使宽度更小（以适应一个jsfiddle http://jsfiddle.net/Neograph734/Vb4Hm/1/ ）。

This should work as well... I have made the widths smaller (to fit a jsfiddle http://jsfiddle.net/Neograph734/Vb4Hm/1/). If you you should edit both margin-left's.

<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

Update: The content should be below the floating divs

这篇关于定位元素左侧和右侧的div带边距：auto的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！