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会发生的情况是，id为'flushDiv'和'indentDiv'的<div>与<div>的id为leftSideDiv的右侧齐平。

我可以在rightDiv上设置可见边框时发生这种情况。它的左侧实际上与leftDiv的左侧齐平。并且这两个元素已经填充到我想要indentDiv的25px缩进上，所以它们都会在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 padding上的#indentDiv以使用margin。请参阅示例：http://jsfiddle.net/hawUs/1/

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

1 个答案: