对齐两个div的左

基本上我想做的事是这样的：对齐两个div的左

http://jsfiddle.net/wQBq5/20/

不使用表。

来源

2011-11-24 Adelino

下面是一个尝试：

http://jsfiddle.net/vaDCQ/

来源

2011-11-24 12:30:04

的保证金左作弊：P，如果更改内容的第一个div覆盖下一个div的内容 – Adelino

是的，我同意，我不知道如何做另一种方式。 –

这不是我所谓的作弊，这是与浮动div工作的现实。如果你改变表格单元格的内容，那么你也可以将它从它的边界伸出，比如一个大的图像。 – dnuttle

-1

这是我的例子.. http://jsfiddle.net/wQBq5/37/

来源

2011-11-24 12:31:02

downvote的原因？ –

这拨弄显示了基础：http://jsfiddle.net/cA3su/。但是有差异。首先，“内部”divs不像桌子那样一直延伸到右边。另一方面，你需要了解如何漂浮和清除工作。这需要一些练习和实验。总之，divs永远不会像表格一样工作。但是一旦你知道如何去做，divs就能让你摆脱桌子创造的许多麻烦。

来源

2011-11-24 12:33:53 dnuttle

例如，如果我在右侧div中插入宽度为100％的图像，它不会在左侧div下移动？ – Adelino

是的，这是可能发生的事情之一，如果元素太宽，那么他们不会正确漂浮。正如其他例子所示，照顾宽度取决于你。我想保持我的示例简单，但强调您确实需要了解浮动和CSS布局以使用它们......有些“陷阱”需要注意。 – dnuttle

您可以使用float实现此功能。

您可以使用这样的事情（基本的例子）：

HTML：

<div class="left-container">1</div> 
<div class="right-container"> 
    <div class="number2">2</div> 
    <div class="number3">3</div> 
</div>

CSS：

.left-container{float:left;width:100px;} 
.right-container{float:left;width:100px;} 
.right-container .number2{float:left;width:100%;} 
.right-container .number3{float:left;width:100%;}

来源

2011-11-24 12:34:13 Alex

对齐两个div的左

回答

相关问题