鸿沟垂直列和调整它们

我'试图创建一个类似于下图的布局：有麻烦鸿沟垂直列和调整它们

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
|  |      |  | 
|  |      |  | 
|  |      |  | 
| 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

鸿沟垂直列和调整它们

回答

相关问题