Question

缩略语

// Layout

<div class="row">
  <div class="medium-3 columns navs">...</div>  <!-- nav links -->
  <div class="medium-9 columns content">...</div> <!-- page content -->
</div>


<style>
.navs {
  border-right: solid 1px #000; //black
}
.content {
  border-left: solid 1px #000; //black
}
</style>

我想有一条垂直边界,跨越两列边界/共同边界的长度/长度。我的问题是,虽然这两个栏目似乎都是相同的高度(斜体),但其内容很少保持统一。在一些网页上,nav链接比content div>的内容长。在某些方面,<代码>中的内容 div已经延长。

无论哪一类I类边界,都有网页显示边界底部存在差距,因为它只延伸到该半部分内容的长度。

<>附加说明:两栏的布局载于一份档案。每一页没有人工添加。每页都有布局。

关于如何解决这一问题的想法?

感谢

Answer 1

仅使用“显示”:集装箱内和违约时,集装箱的高度相同。 E.g.

.row {display: flex;}
.row div {min-height: 100px; min-width: 100px; background: #e7e7e7;} /* for demo purposes */
.navs {
  border-right: solid 1px #000; 
}
.content {
  border-left: solid 1px #000; 
}

<div class="row">
  <div class="medium-3 columns navs">...</div>  <!-- nav links -->
  <div class="medium-9 columns content">...</div> <!-- page content -->
</div>

友情链接