2013-10-09 2 views
0

i'am пытается создать макет, подобный приведенному ниже:Разделить вертикальные колонны и выровнять их

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

I'am возникли проблемы в двух вещах:

  1. Разделив вертикальные колонны;
  2. Выравнивание 1 и 2 с 5;

The website with the example/code

+0

возможно дубликат [CSS флоат собственности для выравнивания ДИВ-х] (http://stackoverflow.com/questions/19124025/css-float-property-to-align-divs) – vishalkin

+0

Просьба уточнить «Выровнять 1 и 2 с 5» и опубликовать соответствующий HTML/CSS в сообщении, поскольку большинство из нас не любят копаться в исходном коде веб-сайта и следить за ссылками на файлы HTML и строить jsfiddle и так далее. ... –

+0

Прошел поиск, не нашел этот вопрос. благодаря – humberto

ответ

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

FIDDLE

-1

Попробуйте использовать этот макет CSS: The Square Grid

Это удивительный макет, который может решить все ваши проблемы.

1

Вы можете использовать%, чтобы указать ширину вертикальных столбцов. Вы можете использовать ниже структуры,

<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%; 
} 
0

Попробуйте это,

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

Установить высоту пожеланию.

0

Попробуйте этот простой код

<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> 
Смежные вопросы