div右侧的div的填充向左浮动

Question

我有一个<div> ，左边有一个固定的宽度和高度，在它的右边我还有两个<div> s。 我希望其中一个<div>与左侧浮动<div>的边界齐平，另一个略微缩进。 这就是我现在所拥有的......

<div 
    id="leftDiv"
    style="border:1px solid grey;
        width:300px;
        height:400px;
        float:left;">
        This is a left floated div with a fixed width and height
</div>

<div id="rightDiv">
    <div id="flushDiv">This should be flush.</div>
    <div id="indentDiv" style="padding:25px">This should be indented.</div>
</div> 

但是，上述HTML的情况是，无论是<div> s的ID的“flushDiv”和“indentDiv”是对的右侧平齐<div> id为leftSideDiv 。

当我在rightDiv上设置可见边框时，我可以解释为什么会rightDiv 。 它的左侧实际上与leftDiv的左侧齐平。 而这两个要素都已经填充了超过我想为25px的缩进indentDiv ，所以他们都最终对右侧平齐leftDiv 。

如果我rightDiv右浮动，我几乎可以获得所需的缩进效果。 indentDiv现在相对于flushDiv缩进，但flushDiv不再与rightDiv的右侧齐平。

好吧，我甚至不确定我是否已经关注自己了。

有谁知道我在问什么并有解决方案？ 我会试着总结一下：

我如何在左浮动div的右侧有两个div，其中一个是左浮动div的右边界再次刷新，另一个是偏移？

Answer 1

这是你想要完成的吗？ 我在它们周围放置了边框，这样你就可以看到它们......这是jsfiddle.com上的一个例子

http://jsfiddle.net/hawUs/

<div id="leftDiv" style="border:1px solid grey;width:300px;height:400px; float:left;">
    This is a left floated div with a fixed width and height
</div>

<div id="rightDiv" style=" float:left;">
  <div id="flushDiv" style="border:1px solid grey; float">This should be flush.</div>
  <div id="indentDiv" style="padding:25px;border:1px solid grey;">This should be indented.    </div>
</div> ​​​​​​​​​​​​​​​

更新：您还可以更改div #indentDiv上的padding以使用margin 。 参见示例： http ： //jsfiddle.net/hawUs/1/