對齊兩個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的左

回答

相關問題