如何强制每个象限只住在该区域的四分之一（HTML / CSS）？ [英] How can I force each piece of a quadrant to inhabit only its fourth of the area (HTML/CSS)?
本文介绍了如何强制每个象限只住在该区域的四分之一（HTML / CSS）？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要创建一个仪表板模型，显示四个等大小的正方形。以下关键html和css是我尝试实现此目的时使用的：
I need to create a "dashboard" mockup that displays four equi-sized squares. The following key html and css is what I'm using in an attempt to accomplish this:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
body {
padding-top: 20px;
padding-bottom: 20px;
background-color: white;
}
.body-content {
-webkit-box-shadow: -1px 0 5px 0 #000000;
-webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
box-shadow: -1px 0 5px 0 #000000;
box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
padding-left: 1px;
padding-right: 1px;
padding-bottom: 15px;
}
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
color: inherit;
background-color: white;
}
.bottommarginbreathingroom {
margin-bottom: 2px;
}
.marginaboveandbelow {
margin-top: 15px;
margin-bottom: 15px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.quarter{
width:50%;
height:100%;
float:left;
}
.contents{
height:50%;
width:100%;
}
</style>
</head>
<body>
<div class="contents">
<div class="col-md-6 quarter" style="background-color:blue;">
<h2>Top 10 Items Purchased</h2>
<div>
<input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
</input>
<label> to </label>
<input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
</input>
</div>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Qty</th>
</tr>
<tr>
<td>Item Code 1</td>
<td>Description 1</td>
<td>Qty 1</td>
</tr>
. . .
<tr>
<td>Item Code 10</td>
<td>Description 10</td>
<td>Qty 10</td>
</tr>
</table>
</div>
<div class="col-md-6 quarter" style="background-color:red;">
<h2>Pricing Exceptions - Weekly Recap</h2>
<h3 class="redfont">Red denotes Contract Item Overages</h3>
<h3>For Weyand on the pricing week of - 7/31/2016</h3>
<table>
<tr>
<th>Invoice No</th>
<th>Invoice Date</th>
<th>Customer</th>
<th>Cust #</th>
<th>Item Code</th>
<th>Description</th>
<th>Member Item Code</th>
<th>Member Description</th>
<th>Bid Price</th>
<th>Sell Price</th>
<th>Qty</th>
</tr>
<tr>
<td>Inv No 1</td>
<td>Inv Date 1</td>
<td>Customer 1</td>
<td>Cust # 1</td>
<td>Item Code 1</td>
<td>Descrip. 1</td>
<td>M.I. Code 1</td>
<td>Memb Desc 1</td>
<td>Bid Price 1</td>
<td>Sell Pr. 1</td>
<td>Qty 1</td>
</tr>
<tr>
<td>Inv No 2</td>
<td>Inv Date 2</td>
<td>Customer 2</td>
<td>Cust # 2</td>
<td>Item Code 2</td>
<td>Descrip. 2</td>
<td>M.I. Code 2</td>
<td>Memb Desc 2</td>
<td>Bid Price 2</td>
<td>Sell Pr. 2</td>
<td>Qty 2</td>
</tr>
<tr>
<td>Inv No 3</td>
<td>Inv Date 3</td>
<td>Customer 3</td>
<td>Cust # 3</td>
<td>Item Code 3</td>
<td>Descrip. 3</td>
<td>M.I. Code 3</td>
<td>Memb Desc 3</td>
<td>Bid Price 3</td>
<td>Sell Pr. 3</td>
<td>Qty 3</td>
</tr>
</table>
</div>
<div class="col-md-6 quarter" style="background-color:yellow;">
<h2>Forecasted Spend</h2>
</div>
<div class="col-md-6 quarter" style="background-color:green;">
<h2>Fill Rate</h2>
</div>
</body>
</html>
我目前正在着色象限，轻松地看到一个结束和另一个开始。如下图所示，这些象限彼此相交，而不是每个占据空间的不少于25％：
I'm currently coloring the quadrants gaudily to easily see where one ends and another begins. As you can see below, the quadrants intrude on each other, rather than each taking no more and no less than 25% of the space:
如何强制象限彼此对齐，使每个象限占用它们共享空间的1/4空间？ IOW，绿色和黄色象限（填充率和预测支出）需要对齐，以使它们在相同的行/与顶部的距离相同。
How can I force the quadrants to align with each other so that each one takes up exactly 1/4 of the space in their shared space? IOW, the green and yellow quadrants ("Fill Rate" and "Forecasted Spend") need to align so that they are on the same "row"/are the same distance from the top.
对于完全公开，这里是整个.hmtl文件：
For "full disclosure," here is the entire .hmtl file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eServices Customer Dashboard</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Inline CSS (don't tell the CSS-Whisperers I did this!) -->
<style>
body {
padding-top: 20px;
padding-bottom: 20px;
background-color: white;
}
hr {
border: 0;
height: 1px;
color: navy;
background: #333;
}
.body-content {
-webkit-box-shadow: -1px 0 5px 0 #000000;
-webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
box-shadow: -1px 0 5px 0 #000000;
box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
padding-left: 1px;
padding-right: 1px;
padding-bottom: 15px;
}
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
color: inherit;
background-color: white;
}
.titletext {
font-size: 2.8em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
}
.titletextjr {
font-size: 1.4em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
}
.addltopmargin {
margin-top: 8px;
}
.sectiontext {
font-size: 1.5em;
font-weight: bold;
font-family: Candara, Calibri, Cambria, serif;
}
.bottommarginbreathingroom {
margin-bottom: 2px;
}
.marginaboveandbelow {
margin-top: 15px;
margin-bottom: 15px;
}
.rightjustifytext {
text-align: right;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.quarter{
width:50%;
height:100%;
float:left;
}
.contents{
height:50%;
width:100%;
}
redfont {
color: red;
}
</style>
</head>
<body>
<div class="container body-content">
<div class="jumbotronjr">
<div class="col-md-3" style="margin-top: 0.6cm">
<img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" alt="PRO*ACT usa logo">
</div>
<div class="col-md-9">
<label class="titletext" style="margin-top: 0.2cm;">eServices Reporting</label>
<br/>
<label class="titletextjr" style="margin-top: -2.2cm;">Customer Dashboard</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<div class="contents">
<div class="col-md-6 quarter" style="background-color:blue;">
<h2>Top 10 Items Purchased</h2>
<div>
<input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
</input>
<label> to </label>
<input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
</input>
</div>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Qty</th>
</tr>
<tr>
<td>Item Code 1</td>
<td>Description 1</td>
<td>Qty 1</td>
</tr>
<tr>
<td>Item Code 2</td>
<td>Description 2</td>
<td>Qty 2</td>
</tr>
<tr>
<td>Item Code 3</td>
<td>Description 3</td>
<td>Qty 3</td>
</tr>
<tr>
<td>Item Code 4</td>
<td>Description 4</td>
<td>Qty 4</td>
</tr>
<tr>
<td>Item Code 5</td>
<td>Description 5</td>
<td>Qty 5</td>
</tr>
<tr>
<td>Item Code 6</td>
<td>Description 6</td>
<td>Qty 6</td>
</tr>
<tr>
<td>Item Code 7</td>
<td>Description 7</td>
<td>Qty 7</td>
</tr>
<tr>
<td>Item Code 8</td>
<td>Description 8</td>
<td>Qty 8</td>
</tr>
<tr>
<td>Item Code 9</td>
<td>Description 9</td>
<td>Qty 9</td>
</tr>
<tr>
<td>Item Code 10</td>
<td>Description 10</td>
<td>Qty 10</td>
</tr>
</table>
</div>
<div class="col-md-6 quarter" style="background-color:red;">
<h2>Pricing Exceptions - Weekly Recap</h2>
<h3 class="redfont">Red denotes Contract Item Overages</h3>
<h3>For Weyand on the pricing week of - 7/31/2016</h3>
<table>
<tr>
<th>Invoice No</th>
<th>Invoice Date</th>
<th>Customer</th>
<th>Cust #</th>
<th>Item Code</th>
<th>Description</th>
<th>Member Item Code</th>
<th>Member Description</th>
<th>Bid Price</th>
<th>Sell Price</th>
<th>Qty</th>
</tr>
<tr>
<td>Inv No 1</td>
<td>Inv Date 1</td>
<td>Customer 1</td>
<td>Cust # 1</td>
<td>Item Code 1</td>
<td>Descrip. 1</td>
<td>M.I. Code 1</td>
<td>Memb Desc 1</td>
<td>Bid Price 1</td>
<td>Sell Pr. 1</td>
<td>Qty 1</td>
</tr>
<tr>
<td>Inv No 2</td>
<td>Inv Date 2</td>
<td>Customer 2</td>
<td>Cust # 2</td>
<td>Item Code 2</td>
<td>Descrip. 2</td>
<td>M.I. Code 2</td>
<td>Memb Desc 2</td>
<td>Bid Price 2</td>
<td>Sell Pr. 2</td>
<td>Qty 2</td>
</tr>
<tr>
<td>Inv No 3</td>
<td>Inv Date 3</td>
<td>Customer 3</td>
<td>Cust # 3</td>
<td>Item Code 3</td>
<td>Descrip. 3</td>
<td>M.I. Code 3</td>
<td>Memb Desc 3</td>
<td>Bid Price 3</td>
<td>Sell Pr. 3</td>
<td>Qty 3</td>
</tr>
</table>
</div>
<div class="col-md-6 quarter" style="background-color:yellow;">
<h2>Forecasted Spend</h2>
</div>
<div class="col-md-6 quarter" style="background-color:green;">
<h2>Fill Rate</h2>
</div>
</body>
</html>
推荐答案
由于您使用Bootstrap，系统。
Since you're using Bootstrap, just utilize their grid system.
看起来您已在这里试过：
Looks like you've attempted it here:
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
但是不要留空，而是将4个表/象限移动到网格范围，例如：
But instead of leaving that empty, move your 4 tables/quadrants into the grid scope, something like:
<div class="contents">
<div class="row">
<div class="col-md-6">{quad 1}</div>
<div class="col-md-6">{quad 2}</div>
</div>
<div class="row">
<div class="col-md-6">{quad 3}</div>
<div class="col-md-6">{quad 4}</div>
</div>
</div>
确保使用 .row 类，例如 Boostrap文档示例。
这篇关于如何强制每个象限只住在该区域的四分之一（HTML / CSS）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
