HTML狗腿草表？

我試圖在HTML中重新創建一箇舊文本。有一段時間，文本有些滑稽：它有兩列文本，當一列到達末尾時，另一列開始跨越整個頁面。HTML狗腿草表？

下面是我在畫圖中創建一個模擬的例子： enter image description here

有沒有辦法在HTML表格來做到這一點？謝謝。

來源

2011-05-22 Dave2

表？你爲什麼想用桌子做這個？ – 2011-05-22 02:22:33

我不知道有任何其他的方式來做到這一點。這裏的每個人都在推薦CSS，但我對CSS一無所知。 – Dave2 2011-05-22 02:50:43

CSS是通過選擇器向頁面上的元素添加樣式屬性的一種特殊方式。在這種情況下你需要CSS。不要害怕;桌子會更方便，更難以引入各種其他問題。 – 2011-05-22 02:55:17

浮動的短款離開應該這樣做：

<p id="short-paragraph">Lorem ipsum…</p> 
<p id="long-paragraph">Vestibulum…</p>

隨着CSS：

#short-paragraph { float: left; width: 40%; padding: 0 2em 2em 0; }

來源

2011-05-22 02:24:24 deceze

正如我在jsFiddle中所做的那樣，您需要將短段的寬度設置爲或不發生任何事情。 – Ryan 2011-05-22 02:25:16

@mini已經修復。 :) – deceze 2011-05-22 02:26:52

是的，它是。請參閱：http://jsfiddle.net/minitech/jj7Bh/

這是一個有點難以看到的的jsfiddle狹窄的頁面大小的影響，但是這是你如何做到這一點 - 只是設置一些CSS樣式的段落＃1。

來源

2011-05-22 02:24:34 Ryan

有沒有辦法做到沒有CSS？我對它不是很熟悉。謝謝。 – Dave2 2011-05-22 02:47:35

你應該想做正確的，這意味着你需要使用層疊樣式表（CSS）。 – 2011-05-22 02:56:17

不，你不想要表格，你想要CSS浮動。

範例CSS：

.container {width:600px} 
.inset {float:left; margin:0 20px 20px 0; width:300px} 
.standard { }

結構示例：

<div class="container"> 
    <div class="inset"></div> 
    <div class="standard"></div> 
</div>

Fiddle

來源

2011-05-22 02:27:17

不要用表格做到這一點。用浮動的<p>與指定的寬度。以下是我剛剛在Safari中驗證的一個示例：

<style type="text/css"> 
.box { 
    float: left; 
    width: 300px; 
    margin-left: 0px; 
    margin-right: 10px; 
    margin-top: 0px; 
    margin-bottom: 10px 
} 
</style> 

<p class="box"> 
Box of text... 
</p> 

<p> 
This text wraps around the bottom of the other text... 
</p>

來源

2011-05-22 02:29:49 Asaph

HTML狗腿草表？

回答

相關問題