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

Question

我有一个 <div>固定的宽度和高度向左浮动，在它的右边我有另外两个 <div>秒。我想要 <div> 之一s 与左浮动 <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>带有 id 的 'flushDiv' 和 'indentDiv' 的 s 与 <div> 的右侧齐平ID leftSideDiv .

当我在 rightDiv 上设置可见边框时，我知道为什么会发生这种情况。 .它的左侧实际上与 leftDiv 的左侧齐平。 .并且这两个元素都已经填充到我想要的 indentDiv 的 25px 缩进中。 , 所以它们最终都与 leftDiv 的右侧齐平.

如果我 float 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/