填充那些对一个div的右侧的div浮动左

我已具有固定宽度和高度的<div>向左浮动，和到它的正确的我有两个其他<div>秒。我想让其中一个<div>与左浮动的<div>的边界齐平，另一个稍微缩进。以下是我目前所面对的...填充那些对一个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>的右侧平齐编号leftSideDiv。

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

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

好的，我甚至不确定我是否在追随自己。

有没有人明白我在问什么，并有一个解决方案？我会尝试总结一下：

我怎样才能有一个左浮动div右边的两个div，其中一个是同时刷新左浮动div的右边界，另一个是抵消？

来源

2012-12-01 John Fitzpatrick

您可以在[jsfiddle.net]（http://jsfiddle.net）上提供您正在执行的操作的演示，以便为我们呈现正在发生的事情并使其更易于帮助！ –

谢谢杰西。我知道我会被要求提供一个jfiddle。我以前从未创建过一个，所以我需要一点时间来创建我的第一个，我假设。 –

如果我得到了什么是写的，那么有一个解决方案http://jsfiddle.net/X6Tdg/5/ –

这是你想要完成的吗？我把它们周围的边框，所以你可以看到他们......这里是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>

更新：您还可以更改padding的DIV #indentDiv使用margin代替。请参阅示例：http://jsfiddle.net/hawUs/1/

来源

2012-12-01 14:55:13 JCBiggar

填充那些对一个div的右侧的div浮动左

回答

相关问题