Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.82/11: Рейтинг темы: голосов - 11, средняя оценка - 4.82
0 / 0 / 0
Регистрация: 23.01.2015
Сообщений: 3
1

2 колонки, где 1 колонка 2 строки, и 2-я колонка 1 строка высотой первой колонки

23.01.2015, 12:56. Показов 1967. Ответов 2
Метки нет (Все метки)

вот есть такая табличка

HTML5
1
2
3
4
5
6
7
8
9
        <table border="1">
            <tr>
                <td rowspan="2">big column</td>
                <td>2 row</td>
            </tr>
            <tr>
                <td>1 row</td>
            </tr>
        </table>
надо повторить тоже самое див'ной версткой, но между колонками и строками расстояние 30пикс

вот что я сделал

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
            <div class="daBlockOneTwo">
                <div class="daTwoBlocks0">
                    Block0
                </div>
                <div class="daTwoBlocks2">
                    <div class="daImageBlockLeft"><img src="main_bani.jpg" /></div>
                    <div class="daTextBlock">blocks2</div>
                </div>
                <div class="daTwoBlocks3">
                    <div class="daImageBlockLeft"><img src="main_bani.jpg" /></div>
                    <div class="daTextBlock">blocks3</div>
                </div>
            </div>
вот такой вот стиль

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
            .daBlockOneTwo {
                margin-left: auto;
                margin-right: auto;
                min-width: 960px;
                width: 960px;
                //background-color: #ddd;
                color: #000;
            }
            .daTwoBlocks0 {
                width: 465px;
                height: 505px;
                float:left;
                background-color: #999;
            }
            
            .daTwoBlocks2 {
                margin-left: 30px; 
                width: 465px;
                float:left;
                background-color: #999;
            }
            
            .daTwoBlocks3 {
                margin-left: 30px;
                margin-top: 30px;
                width: 465px;
                float:left;
                background-color: #999;
            }
            
            .daImageBlockLeft {
                float:left;
            }
            .daTextBlock {
                padding-left: 5px;
                float: left;
            }
и теперь интересует как сделать первую колонку высотой равной двум строкам второй колонки, также плюс между колонками 1 и 2 есть отступ 30пикс, и между строками второй колонки также отступ 30пикс. в данном примере в классе .daTwoBlocks0 выставляется конкретная высота.

Дело вот в чем, впринципе все визуально выглядит в хроме нормально (высота подобрана опытным путем), но уже в др. браузерах, первая колонка "пляшет" по высоте +- 1(2) пикселя %) люблю когда все везде одинаково %)
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
23.01.2015, 12:56
Ответы с готовыми решениями:

Не работает передняя колонка на системе 5,1 колонки sven sps-860
раньше работало все отлично теперь поставил вин 7 неработает передняя колонка сма колонка 100%...

при заполнении колонки А значением дата, колонка В выводит текст
Здравствуйте, прошу помочь. Имеется массив данных. Условно если в столбце В дата проставлена, то в...

Три колонки, если одно значение одной равно второй, то ИСТИНА третья колонка
Здравствуйте! Простите за сложную тему, уж не придумал как её назвать умнее. Все что я опишу ниже...

Добавление в сводной таблице колонки, которая равняется сумме всех колонок минус предпоследняя колонка
Помогите добавить в сводной таблице колонку, которая равняется сумме всех колонок у всех валютах...

2
16 / 16 / 9
Регистрация: 17.04.2014
Сообщений: 74
23.01.2015, 15:55 2
Как вариант:
HTML5
1
2
3
4
5
6
7
<div class="daBlockOneTwo">
    <div class="daTwoBlocks0">Block0</div>
    <div class="daTwoBlocks2">
         <div class="daTextBlock_1"><img src="main_bani.jpg" alt="1"/>blocks2</div>
         <div class="daTextBlock_2"><img src="main_bani.jpg" alt="2"/>blocks3</div>
    </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.daBlockOneTwo {
    height: 330px;
    width : 430px;
    border : 1px solid;
}
.daTwoBlocks0 {
    float : left;
    width: 200px;
    height : 100%;
    background-color : #EEEFFF;     
}
    .daTwoBlocks2 {
        float : right;
        width : 200px;
        height : 100%;
        margin-left : 30px;
    }
    .daTextBlock_1 {
        height : 150px;
        width : 100%;
        background-color : #CCCFFF;
        margin-bottom : 30px;
    }
    .daTextBlock_2 {
        height : 150px;
        width : 100%;
        background-color : #FFFCCC;
    }
Вот пример : http://jsfiddle.net/xv4sq1eo/
0
0 / 0 / 0
Регистрация: 23.01.2015
Сообщений: 3
26.01.2015, 09:38  [ТС] 3
TexSV, ^_^ спасибо, правда кондишены немного поменялись, и блоки теперь имеют конкретные высоту, ширину, и теперь, тупо можно для daTwoBlocks0 задать конкретные значения, но тем неменее, может быть кому-нибудь пригодится...
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
26.01.2015, 09:38

Bootstrap, колонка высотой 100%
День добрый! Решил повкуривать в Bootstrap 3 и столкнулся с такой проблемой: не могу...

Верстка в две колонки высотой до футера
Помогите выровнять колонки. Когда в одной колонке много текста то вторая колонка становится равной...

Вертикальное выравнивание и колонки с одинаковой высотой
Столько много инфы по этим вопросам, хочу узнать у опытных людей самые используемые(частые) и...

Как изменить ширину самой первой колонки выбора строки в DataGrid (.NET Compact Framework)?
Имеется заполненная DataGrid, которая чуточку не влезает на экран! Вопрос: Как можно уменьшить...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru