[英]How to partition a div into 3 parts separated by borders in html
我在頁面頂部有一個導航欄。在導航欄下方的下一個 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;
}
表格布局引擎要求一行中的每個單元格都具有相同的高度。 只需添加邊框。
您的問題我不太清楚。 但是下面的代碼是否適合您的要求。 我已添加內聯的CSS。
<div>
<div style="float: left;width: calc(100%/3);background:red">left</div>
<div style="float: left;width: calc(100%/3);background:pink">center</div>
<div style="float: left;width: calc(100%/3);background: blue">right</div>
</div>
您寧願在這里使用HTML Table。 如果您仍然堅持使用div，則將其用作CSS表
這是解決方案
這是HTML代碼，位於您的html內
<div class="maindiv">
<div id="divone" class="subdiv"></div>
<div id="divtwo" class="subdiv"></div>
<div id="divthree" class="subdiv"></div>
</div>
這是您的CSS代碼.css文件中
div.maindiv{
width:99%;
height:400px; /*use any height you want*/
border:0px solid black;/*use 1px if you want and remove this after you positioned correctly*/
position:absolute;
top:300px;/*try with changing this according to your view*/
}
div.maindiv div.subdiv{
width:33%;
height: 100%;
border:1px solid red;
float: left;
background-color: pink;
}
如果使用引導程序，這很容易。
您需要在此處和下面的HTML表是非常有用的代碼段，這可能會對您有所幫助。 在這里，您將實現所需的功能，還可以對表的列進行大小調整。 前往這篇文章的codepen鏈接...
rstrahl /筆/ xZErX
在 HTML 中，如何創建一個內容溢出邊框並且可以拖動的 div？
[英]In HTML, how to create a div with content that overflows borders and can be draggable?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.