鴻溝垂直列和調整它們

我'試圖創建一個類似於下圖的佈局：有麻煩鴻溝垂直列和調整它們

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
|  |      |  | 
|  |      |  | 
|  |      |  | 
| 1 |      | 2 | 
|  |      |  | 
|_ _ _ |   5   |_ _ _ | 
|  |      |  | 
|  |      |  | 
| 3 |      | 4 | 
|  |      |  | 
|  |      |  | 
|_ _ _ |_ _ _ _ _ _ _ _ _ _ _|_ _ _ |

我'兩件事情：

分割垂直列;
將1和2對齊5;

The website with the example/code

來源

2013-10-09 humberto

可能重複[CSS的float屬性來對齊div的（http://stackoverflow.com/questions/19124025/css-float-property-to-align-divs） – vishalkin

請澄清「將1和2與5對齊」，並在帖子中發佈您的相關HTML/CSS，因爲我們大多數人不喜歡挖掘網站的源代碼並關注HTML文件的鏈接並構建jsfiddle等。 ... –

做了搜索，沒有發現這個問題。謝謝 – humberto

#content { 
    margin: 20px 0px 0px 20px; 
    width:180px; 
    background-color: green; 
    overflow: auto; 
    padding-left: 10px; 
}

FIDDLE

來源

2013-10-09 10:35:32 vishalkin

-1

嘗試使用這個CSS佈局： The Square Grid

這是一個真棒佈局，可以解決所有的你的問題。

來源

2013-10-09 10:36:48 interhost

您可以使用％來提及垂直列的寬度。符合您的要求，您可以使用下面的結構，

<div> 
    <div class="leftside"> 
     <div class="1"></div> 
     <div class="3"></div> 
    <div> 

    <div class="Center"> 
     <div class="5"></div> 
    <div> 
    <div class="rightside"> 
     <div class="2"></div> 
     <div class="4"></div> 
    <div> 
</div> 

<style> 
.leftside 
{ 
    float:left; 
    width:15%; 
} 

.rightside 
{ 
    float:right; 
    width:15%; 
} 
.center 
{ 
    floas:left; 
    width:70%; 
}

來源

2013-10-09 10:38:59 Kishori

試試這個，

<div style="width:100%"> 
<div style="width:15%; float:left"> 
    <div style="width:100%"></div> 
    <div style="width:100%"></div> 
</div> 
<div style="width:70%; float:left"> 
</div> 
<div> 
    <div style="width:100%"></div> 
    <div style="width:100%"></div> 
</div> 
</div>

設定高度。

來源

2013-10-09 10:42:56

試試這個簡單的代碼

<table border="1"> 
    <tr><td >1</td><td rowspan="2" colspan="2" width="70%" align= "center" >5</td ><td >2</td></tr> 
    <tr><td>3</td><td>4</td></tr> 
    </table>

的

來源

2013-10-09 10:54:14

鴻溝垂直列和調整它們

回答

相關問題