CSS - HTML - 2浮動列

我現在代碼：

<div style="width: 500px; margin: auto; border: 1px solid black;"> 
    <div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div> 
    <div style="float: left; margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div> 
    <div style="clear: both;"></div> 
</div>

而且現在看來是這樣的：

當第二個div字是短，可以放置在第一個div之後，它在一行中，像這樣：

我的目標是獲得這種設計，當秒秒更長。我不允許使用WIDTH和FLOAT: RIGHT，因爲內部div不得不動態！

像這樣（PhotoShop的）：

enter image description here

感謝提前的幫助！

來源

2012-02-01 Skylineman

需要注意的是，您遺漏了你的第一個'div' – 2012-02-01 16:20:50

您可以使用最大寬度的結束標記？ – 2012-02-01 16:23:52

＃1 - 它不會丟失，只是忘了複製。＃2 - 我不能。 – Skylineman 2012-02-01 16:29:58

這就是你要找

我刪除浮動：從第二內離開div並增加了保證金。

<div style="width: 500px; margin: auto; border: 1px solid black;"> 
<div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div> 
<div style=" margin-left: 60px; border: 1px solid black;">A A A A A A A A A A A A A A A A  A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A  </div> 
<div style="clear: both;"></div></div>

希望這有助於

來源

2012-02-01 16:39:55

謝謝。 :)沒有想到這個..：D – Skylineman 2012-02-01 16:47:53

沒問題。希望它能夠滿足你的需求。記得檢查其他瀏覽器，因爲我只在Chrome和IE9 – 2012-02-01 16:55:50

中檢查好的答案。唯一的問題是如果'test'div的大小發生變化。爲'test'div添加一個'margin-right：20px'，然後在第二個內部div添加'overflow：auto'就行了。 [Jsfiddle here]（http://jsfiddle.net/magicalex/pP3Mz/）。 – magicalex 2012-02-01 16:57:14

<div style="width: 500px; margin: auto; border: 1px solid black;"> 
<div style="float: left; border: 1px solid black;width:50px;"><b><u>TEST</u></b></div> 
<div style="float: left; margin-left: 20px; border: 1px solid black;width:420px;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div> 
<div style="clear: both;"></div> 
</div>

這是接近你想要的。我只是設置內部div的寬度。另外，您忘記關閉第一個div標籤。

來源

2012-02-01 16:26:47 Andrew

我相信_inner_ DIVs上不允許WIDTH，不是嗎？ – 2012-02-01 16:29:56

只是忘了複製，我不允許使用寬度！ – Skylineman 2012-02-01 16:31:23

@Skylinemanman我試過了，它看起來像你的Photoshop圖像 – Andrew 2012-02-01 16:32:28

將第一個框左側浮動並給予固定寬度。然後給右邊的div留下一個大於左邊的div的寬度！ ...不要浮在第二個div

來源

2012-02-01 16:30:25

...並且不漂浮第二個div，如果這就是你的意思。 – Residuum 2012-02-01 16:34:04

Skylineman「不允許使用寬度」 – FelipeAls 2012-02-01 16:36:40

嘗試：

<div style="overflow: hidden; width: 500px; margin: auto; border: 1px solid black;"> 
    <div style="float: left; margin-right: 20px; border: 1px solid black;"> 
    <b><u>TEST</u></b> 
    </div> 
    <div style="overflow: hidden;"> 
    <div style="float: left; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div> 
    </div> 
</div>

http://jsfiddle.net/ZmRY2/5/

來源

2012-02-01 16:30:49 Yoshi

請低位選民解釋他/她的推理嗎？ – Yoshi 2012-02-01 17:10:12

沒有寬度允許的？確定這裏是一個嘗試：

AFAIK你不能這樣做與浮動沒有一些寬度屬性。與「列」的相對位置相同：在第二列上仍然需要寬度和餘量。

的溶液使用CSS display: table;和table-cell（沒了，而不是HTML表））。它像你想要的那樣靈活。
http://dabblet.com/gist/1717860會告訴你一個例子（HTML從CSS分離，增加了對清晰度的ID，但是是不是真的需要和過時元u取出並b。通過強有力的替代。但是CSS font-weight: bold;會更好，沒有上下文）

#main { 
    display: table; 
    width: 500px; 
    margin: auto; 
    border: 1px solid blue; 
} 

#main > div { 
    display: table-cell; 
    border: 1px dashed black; 
    padding: 1em; 
} 


#main > div + div { 
    padding-left: 20px; 
}

編輯：兼容性IE8 +
display: inline-block;爲IE6/7良好的回退。好顯示：內聯;縮放：1;事實上，由於IE6/7不理解inline-block的值，但是可以達到同樣的內聯+ hasLayout的）

來源

2012-02-01 16:31:34 FelipeAls

謝謝，你的工作也是。 – Skylineman 2012-02-01 16:50:21

這爲什麼會下降？ http://snpr.cm/rTXeRm.png – Skylineman 2012-02-01 16:57:23

如果沒有代碼，我只能告訴你，是不是以表格單元模式顯示子代或父類不顯示爲表格。或者你的「細胞」沒有相同的父母（不是祖先，父母）。 – FelipeAls 2012-02-01 17:45:14

就好像是一個表格單元格，試試這個

<div style="width: 500px; margin: auto; border: 1px solid black;"> 
    <div style="float: left;"> 
     <div style="border: 1px solid black;"><b><u>TEST</u></b></div> 
    </div> 

    <div style="display:table-cell;"> 
     <div style="margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div> 
    </div> 

    <br style="clear: both;"> 
</div>

來源

2012-02-01 16:56:53 Guilherme

CSS - HTML - 2浮動列

回答

相關問題