Недавно, когда я рисовал интерфейс, я столкнулся с требованием: нарисовать в интерфейсе вертикальную линию, причем высота этой вертикальной линии должна автоматически занимать весь родительский div (то есть высота этой вертикальной линии одинакова как высота двух элементов div). Более высокий имеет одинаковую высоту).
Обычно мы рисуем горизонтальную линию и просто используем тег <hr>. Когда мы рисуем вертикальную линию, мы обнаруживаем, что тег не может быть найден. После поиска информации в Интернете обычно рекомендуется использовать js. Я был параноиком и хотел использовать чистый CSS, и наконец нашел решение, о котором поделюсь ниже.
Добавьте еще один элемент div к двум вложенным элементам, установите видимую левую (правую) границу и используйте принцип использования положительных и отрицательных значений отступа-дно|margin-bottom для смещения друг друга. Например, padding-bottom:1600px; margin-bottom:-1600px , мы можем понять это так: дополнение может использоваться для расширения внешней метки, но поле не используется для расширения внешней метки. То есть, когда для увеличения высоты внешней метки используется дополнение-дно, внешняя метка использует переполнение: скрыто, чтобы скрыть лишнюю высоту, чтобы высоту можно было выровнять по самому высокому столбцу, а поле было связано с верхним столбцом; макет модуля, а поля могут смещать отступы. Растянутый блок позволяет макету начинаться с раздела содержимого.
Вот код:
body { поля-верх: 100 пикселей; поля слева: 200 пикселей; } .maindiv { ширина: 900 пикселей; переполнение: скрыто; / * ключ * / граница: 1 пиксель, сплошной черный } .leftdiv { float: left; :400px; цвет фона:#CC6633 } .rightdiv{ float:right; ширина:400px; цвет фона:#CC66FF; } .centerdiv{ float:left; border-right: 1px пунктирный черный; /*key*/margin-bottom: /*key*/; } <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content -Type content=text/html; charset=gb2312 /> <title>Метод рисования вертикальной линии</title> <link href=../css/demo.css rel=stylesheet type=text/css /> </head> <body> <div class=maindiv> <div class=leftdiv><br><br><br><br><br><br><br></div> <div class=centerdiv></div> <div class=rightdiv><br><br><br><br><br><br><br><br></div> </div> </body> </html >Рендеринг:
Кстати, запишите идеи и ключевые коды js
Сравните высоту двух дочерних элементов div, какой из них выше. Вы также можете достичь этой цели, сделав видимой прилегающую границу более высокого элемента div.
Ниже приведен код js
функция myfun () {вар div1 = document.getElementById (содержание); вар div2 = document.getElementById (сторона); вар h1 = div1.offsetHeight; вар h2 = div2.offsetHeight; если (h1> h2) { div1.style. borderRight=1 пиксель пунктирный #B6AEA3 }else{; div2.style.borderLeft=1px пунктирный #B6AEA3 } }; Подвести итогВыше представлено введение редактора в то, как нарисовать вертикальную линию между двумя тегами div в HTML. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!