Блог

Главная - Вопросы по программированию - Двухколоночный многострочный CSS-макет с особыми требованиями

Двухколоночный многострочный CSS-макет с особыми требованиями

#html #css

#HTML #css

Вопрос:

Следующий макет вызывает у меня головную боль. Таблицы не должны использоваться, а второй столбец должен быть одним элементом, содержащим все строки. Строки должны начинаться с одинаковой высоты в двух столбцах. Оба столбца являются плавными с фиксированным соотношением.

Как я могу добиться этого, используя HTML и CSS? Я бы предпочел семантически элегантное решение без какого-либо JavaScript.

  --------  ------------------------ 
|  Row 1 ||  Row 1                 |
|        ||                        |
 ---------------------------------- 
|  Row 2 ||  Row 2                 |
|        ||  xxxxxxxxxxx           |
|        ||  xxxxxxx               |
|        ||  xxxxxxxx              |
 ---------------------------------- 
|  Row 3 ||  Row 3                 |
|  xxxx  ||                        |
|  xxxxx ||                        |
|  xx    ||                        |
 ---------------------------------- 
|  Row 4 ||  Row 4                 |
|  xxxxx ||  xxxxxxxxxxxxx         |
|        ||  xxxxxxxx              |
|        ||                        |
 --------  ------------------------

Почему второй столбец должен быть одним элементом, содержащим все строки?

Мне нужно применить рамку-тень, охватывающую всю высоту столбца.

 box-shadow: 0 0 20px rgba(0,0,0,.3);

Комментарии:

1. второй столбец должен быть одним элементом, содержащим все строки . это странное требование, а не особенное.

2. box-shadow будет применен к правому столбцу, поэтому он должен быть одним непрерывным элементом.

3. если это так, у вас может быть какой-то обходной путь для отображения тени окна, используя один элемент для второго столбца, сохраняя при этом равные высоты ячеек (в одной строке), что нелегко сделать только с помощью HTML и CSS.

4. Я уже ожидал, что… Я, вероятно, придумаю какое-нибудь хакерское решение, но, пожалуйста, не стесняйтесь поделиться более элегантным способом, если вам это известно.

5. это зависит от гибкости вашей таблицы, например, если ширина второго столбца фиксирована, мы можем просто использовать псевдоэлемент для отображения тени окна.

Метки: