我在页面顶部有一个导航栏。在导航栏下方的下一个 div 中，我试图将一个 div 分成 3 列，这些列由边框分隔但不由背景颜色分隔。
我希望所有 3 个分区的背景颜色都是唯一的。我尝试使用框架集和框架标签。但它正在对整个页面进行分区。我不希望将整个页面分成 3 列。
首先，我想在页面的顶部放置导航栏，然后我想将该页面的一个特定的 div 分成 3 列。我该如何实现？
谁能帮我解决这个问题......
My html code:
<!DOCTYPE html>
<html ng-app="Admin">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/Scripts/Home.js"></script>
<script src="js/angular-route.min.js"></script>
<script
src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="http://caitp.github.io/ng-media/ng-media.js"></script>
</head>
<body class="home">
<div ng-controller="Home" class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<img src="images/logo.jpg" style="width: 100px;">
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="home1.html">HOME</a></li>
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#">EXPLORE OCR <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Option1</a></li>
<li><a href="#">Option2</a></li>
<li><a href="#">Option3</a></li>
</ul></li>
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#">+FEATURES <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Option1</a></li>
<li><a href="#">Option2</a></li>
<li><a href="#">Option3</a></li>
</ul></li>
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#">HELP <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Option1</a></li>
<li><a href="#">Option2</a></li>
<li><a href="#">Option3</a></li>
</ul></li>
</ul>
</div>
<div class="navbar-header">
<ul class="nav navbar-nav navbar-right">
<li><a href="signIn.html" style="padding-left: 332px;">SignIn</a></li>
<li><a href="logOut.html">LogOut</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div>
// I'm trying to partition this div into 3 columns(left,center,right).
</div>
</body>
</html>
最佳答案
有几种方法。我通常喜欢使用 display: table-cell。像这样的东西:
<div class="three-columns">
<div class="column">
<!-- Content Here -->
</div>
<div class="column">
<!-- Content Here -->
</div>
<div class="column">
<!-- Content Here -->
</div>
</div>
和
div.three-columns {
display: table;
width: 100%;
border-collapse: collapse; /* Prevent spaces between cells */
}
div.three-columns > .column {
display: table-cell;
width: 33.33%;
border-left: <BORDER DEFINITION HERE>
}
div.three-columns > .column:first-child {
/* Since we only want borders between the elements, remove the leftmost border */
border-left: none;
}
表格布局引擎要求一行中的每个单元格高度相同。只需添加边框即可。
关于html - 如何在 html 中将一个 div 分成由边框分隔的 3 个部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34428883/