0

我有<div>一个固定宽度和高度的左浮动，在它的右边我有另外两个<div>s。我想让一个<div>s 与 left-floated<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 发生的事情是 id 为 'flushDiv' 和 'indentDiv' 的 s 都与id<div>的右侧齐平。<div>leftSideDiv

我知道为什么当我在rightDiv. 它的左侧实际上与leftDiv. 并且这两个元素已经在我想要的 25px 缩进上很好地填充indentDiv，因此它们最终都与leftDiv.

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

好吧，我什至不确定我是否在关注自己。

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

如何在左浮动 div 的右侧有两个 div，其中一个与左浮动 div 的右边框齐平，另一个偏移？

4

1 回答 1

2

这是你想要完成的吗？我在它们周围设置了边框，这样你就可以看到它们......这是 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> ​​​​​​​​​​​​​​​

更新：您也可以更改paddingdiv#indentDiv上的使用margin来代替。见例子：http: //jsfiddle.net/hawUs/1/

于 2012-12-01T14:55:13.080 回答