1

Состояния, которых хочется достичь

  1. 1 столбец должен быть одинаковой высоты что и 2 другие столбца
  2. 1 столбец должен занимать 40% ширины, а 2 других по 30%
  3. Строки в 2х последних столбцах должны быть одинаковой высоты
  4. Первые 2 строки должны быть по 40% высоты, а последняя строка 20%

Помогите пожалуйста, замучался уже выравнивать.
Прикладываю фотку для понятности

layout

Спасибо

2

1 ответ 1

2

c <table>

<style>
body, html { 
width:100%;
height:100%;
padding:0px;
margin:0px;
}
#mytable {
width:100%;
height:100%;
border-spacing:0px;
} 
#mytable td {
text-align:center;
vertical-aligh:middle;
} 
#myrow1 {
height:40%;
}
#myrow2 {
height:20%;
}
.c-red { 
background-color:red;
}
.c-blue { 
background-color:blue;
}
.c-lblue { 
background-color:lightBlue;
}
.c-gray { 
background-color:gray;
}
.c-yellow { 
background-color:yellow;
}
</style>  
<table id="mytable">
<col width="40%"><col width="30%"><col width="30%">
<tr id="myrow1"><td rowspan=3 class="c-red">1</td><td class="c-blue">2</td><td class="c-yellow">3</td></tr>
<tr id="myrow1"><td class="c-gray">4</td><td class="c-lblue">5</td></tr>
<tr id="myrow2"><td class="c-yellow">6</td><td class="c-red">7</td></tr>
</table>

с дивами (инлайн-стили - для краткости)

<style>
body, html, #fs { 
width:100%;
height:100%;
margin:0;
padding:0;
}
#i1-table { 
display:table;
width:100%;
height:100%;
} 
#i1-trow { 
    display:table-row;
    width:100%;
    height:100%;
}
#i1-rowspan { 
display: table-cell;
height:100%;
width:40%;
background-color:red;
text-align:center;
vertical-align:middle;
} 
#i1-rowcont { 
display: table-cell;
height:100%;
width:60%;
} 
#i1-table-in { 
display:table;
width:100%;
height:100%;
}
.i1-rowcont-row1 { 
display: table-row;
height:40%;
width:100%;
} 
.i1-rowcont-row2 { 
display: table-row;
height:20%;
width:100%;
} 
.i1-cell1 { 
display: table-cell;
width:50%;
text-align:center;
vertical-align:middle;
}
.i1-cell2 { 
display: table-cell;
width:50%;
text-align:center;
vertical-align:middle;
}
</style>
<div id="fs">
<div id="i1-table">
<div id="i1-trow">
<div id="i1-rowspan">
    1
</div> 
<div id="i1-rowcont">
<div id="i1-table-in">
<div class="i1-rowcont-row1">    
<div class="i1-cell1" style="background-color:blue">
    2
</div>
<div class="i1-cell1" style="background-color:yellow">
    3
</div>
</div>    
<div class="i1-rowcont-row1">    
<div class="i1-cell1" style="background-color:gray">
    4
</div>
<div class="i1-cell1" style="background-color:cyan">
    5
</div>
</div>    
<div class="i1-rowcont-row2">    
<div class="i1-cell2" style="background-color:magenta">
    6
</div>
<div class="i1-cell2" style="background-color:green">
    7
</div>
</div>    
</div>  
</div>    
</div>    
</div>  
</div>

3
  • Большое спасибо :) 16 фев 2017 в 9:43
  • Пожалуйста... согласно Великому Учению Хиппи труд придуман человеком для наслаждения а не мучений ;-) 16 фев 2017 в 9:49
  • Ты не знаешь, как сделать так чтобы при нажатии на один из квадратов (2 или 3 -> они объединялись в одну строку?) или при нажатии на 4 или 5 объядинялись в одну с тем же размером. У меня почему то квадраты взаимосвязанные, т.е. если объединяю 2 квадрата в строку. Хоть это и будет строка они будет размера 1 квадрата. 16 фев 2017 в 19:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.