將表格佈局轉換爲div佈局

-5

我是HTML & CSS中的新成員。我使用表格標籤學習了網頁設計。現在我正在學習使用div標籤的無表設計。我現在正在將我設計的舊網站轉換爲使用div標籤的新網站。我在設計中遇到問題。我張貼工作正常的表格標籤和新的代碼在不正確的舊標籤的div標籤。請告訴我我錯在哪裏。這是工作將表格佈局轉換爲div佈局

新設計精美：

Visit http://jsfiddle.net/rizwan1969/k4111Lzj/1/

全新設計這是不準確的，因爲老：

Visit http://jsfiddle.net/rizwan1969/8vpyk815/

我怎樣才能做到不使用表相同的外觀？

來源

2015-01-02 Muhammad Rizwan

請將代碼直接添加到問題以及JSFiddle的鏈接。 – Brian

http://jsfiddle.net/8vpyk815/1/ –

除了支持基於'table'的佈局，我可能會建議使用標題標籤'h1，h2，h3'等，而不是'strong'標籤並且不要使用「align」屬性來對齊網頁的元素。 – hungerstar

你很接近，當你使用div時，你必須小心你把什麼放在外部div上，因爲它們也適用於內部div，所以你想要的是這樣的：

#right_col { 
    width:260px; 
    /* padding:5px; */ 
    background-color:#999900; 
    float:left; 
    line-height:18px; 
    font-size:12px; color:#FFFFFF; text-align:justify 

} 
#heading 
{ 
    font-size:16px; 
    color:#FFFFFF; 
    padding:10px; 
    background-color:#030; 
    display:block; 
} 
.content { 
    padding:7px; 
}

和添加內容div來從文本的標題分開：

<div id="right_col"> 
<strong id="heading">QUAID'S MESSAGE</strong> 
    <div class="content"> 
     <img src="images/quaid-2.jpg" align="left" style="margin-right:5px; border: 1px solid #006600; "/> "Pakistan is proud of her youth, particularly the students, who are nation builders of tomorrow. They must fully equip themselves by discipline, education, and training for the arduous task lying ahead of them." 
    </div> 
</div>

小提琴繼承人：http://jsfiddle.net/8vpyk815/2/

，你也應小心，所有的第e隨機填充會導致他們可以使用其他元素內部的元素難以工作

來源

2015-01-02 16:03:06 indubitablee

爲什麼不爲圖像添加一個CSS類並放棄'align'屬性來代替內聯樣式？可能用標題標籤替換'strong'標籤。 – hungerstar

我純粹只是改變問題中給出的代碼來解決他所遇到的問題。我同意你對編碼實踐/改進的建議，但我認爲這取決於作者的特權（在這個問題的背景下），而不是我強加的地方，但我同意你的意見。 – indubitablee

我明白你在說什麼，但它永遠不會傷害到展示良好的做法，而不是強化它們。 – hungerstar

將表格佈局轉換爲div佈局

回答

相關問題