HTML DIV佈局

我希望創建一個如下所示的簡單佈局。HTML DIV佈局

Div Layout

是否有人可以告訴我怎樣才能做到這一點？請原諒「坦率」，我來自C＃背景，所以開發一個WEB UI對我來說有點令人生畏。

更新： 我與CSS和CSS雜亂，但沒有產生我想要的東西。

來源

2012-11-27 Subby

爲什麼有人給-1這個問題？請解釋一下 – MikroDel

@MikroDel我給了這個問題一個-1，因爲它非常寬泛和寬泛 - 你可能是最好的搜索「css列」而不是在這裏詢問 – Sean

thaks評論）現在他或她知道什麼是錯的 – MikroDel

這可能會幫助您：

<body> 
<div style="border: 1px solid; float: right; width: 25%; height: 1000px;" id="1">one</div> 
<div style="border: 1px solid; height: 250px; width: 74%;" id="1">two</div> 
<div style="border: 1px solid; width: 35%; float: right; height: 750px;" id="1">three</div> 
<div style="border: 1px solid; width: 35%; height: 750px;" id="1">four</div> 
</body>

來源

2012-11-27 14:00:29 Sarang

one

two

three

four

– Sarang

Two column div layout with fluid left and fixed right column
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
這些鏈接告訴你如何處理兩個欄佈局。首先做到左右兩列，然後再爲左列做一次。

來源

2012-11-27 13:50:38 nvcnvn

一個CSS網格系統，如960.gs或Twitter's bootstrap將大量幫助讓佈局按照您的要求工作。

來源

2012-11-27 13:52:08 danwellman

雖然我們可以寫出所有需要實現此佈局的代碼，但如果您不知道CSS，則對您不會有好處。但是，我們可以指出你的方向是正確的。

這可以通過使用帶CSS的浮動規則來實現。 Here's a link

對於HTML的基本理解也應該在語義上進行佈局。如果你需要所有的幫助，Codecademy會帶你通過HTML和CSS。

來源

2012-11-27 13:54:18 tbwiii

<HTML> 
    <HEAD> 
     <TITLE>Working with div</TITLE> 
     <META CHARSET="UTF-8" /> 
    </HEAD> 
    <BODY> 

     <link rel=stylesheet href="div.css" type="text/css"> 


     <div class="a2">two</div> 
     <div class="a1">one</div> 
     <div class="VerticalSpace"></div> 
     <div class="a3">three</div> 
     <div class="HorizontalSpace"></div> 
     <div class="a4">four</div> 

    </BODY> 
</HTML>

和div.css文件的內容是

.a1, .a2, .a3, .a4 
    { 
     border: 4px solid; 
    } 

    .VerticalSpace, .HorizontalSpace 
    { 
     border: 0px; 
     float: left; 
    } 

    .a2 
    { 
     height: 250px; 
     float: left; 
     width: 74%; 
    } 

    .a3 
    { 
     height: 350px; 
     float: left; 
     width: 35%; 
    } 

    .a4 
    { 
     height: 350px; 
     float: left; 
     width: 35%; 
    } 

    .a1 
    { 
     height: 617px; 
     width: 23%; 
     float: right; 
    } 

    .VerticalSpace 
    { 
     width: 60%; 
     height: 10px; 
    } 

    .HorizontalSpace 
    { 
     height: 350px; 
     width: 4%; 
    }

來源

2013-11-25 12:28:16 Alejandro

回答

相關問題