大佬教程收集整理的这篇文章主要介绍了html – div之间全高的垂直线,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我怎样才能做到这一点?因为,正如你在css-code中看到的那样,border-right / border-left对我来说不起作用.
意向
<div class="content"> <div class="content_left"></div> <div class="content_mid"></div> <div class="content_right"></div> </div>
CSS
.content { line-height: 1.1; BACkground-color: #FFF; color: #000; position: absolute; top: 36px; /* because there is a top-menu which is 36px high */ left: 70px; /* because there is a side-menu which is 70px wide */ right: 0px; bottom: 0px; overflow-x: hidden; overflow-y: auto; } .content_left { position: absolute; width: 22.5%; left: 0px; top: 0px; border-right: 1px solid #ccc; padding: 10px; overflow-x: hidden; overflow-y:hidden; } .content_mid { position: relative; width: 50%; top: 10px; left: 25%; float: left; padding-left: 10px; } .content_right { position: absolute; width: 22.5%; right: 0px; top: 0px; border-left: 1px solid #ccc; padding: 10px; overflow-x: hidden; overflow-y: hidden; }
编辑1:我希望这些单独的行宽1px,我不能将content_left,content_mid,content_right的高度设置为100%,因为我在这些div中有可调整大小的框.
HTML结构比你的更复杂:
<div class="menu-top">Menu top</div> <div class="wrapper"> <div class="menu-left">Menu left</div> <div class="content"> <div class="column"> <div class="column-content"> <h1>column 1</h1> </div> </div> <div class="column"> <div class="column-content"> <h1>column 2</h1> </div> </div> <div class="column"> <div class="column-content"> <h1>column 3</h1> </div> </div> </div> </div>
这是CSS:
body { padding: 0; margin: 0; box-sizing: border-box; height: 100%; width: 100%; } .menu-top { width: 100%; height: 36px; BACkground-color: #3498DB; } .wrapper { display: flex; } .menu-left { height: calc(100vh - 36pX); width: 70px; BACkground-color: #59ABE3; } .content { width: calc(100vw - 70pX); height: calc(100vh - 36pX); BACkground-color: #E4F1FE; display: flex; } .column { flex: 33; border-left: 1px solid hotpink; } .column:first-of-type { border-left: none; }
以上是大佬教程为你收集整理的html – div之间全高的垂直线全部内容,希望文章能够帮你解决html – div之间全高的垂直线所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。