问题描述
我正在为我们的客户创建一些数据可视化，他们要求我将数据图表的描述放在左侧，将数据图表放在右侧。显然，我需要创建一个分隔器以将其分成两半，但是我已经过分考虑了。如何获得所需的输出，如下面的链接？
我想提供有关上下文的完整代码。我知道包含菜单和参考很烦人，但是我宁愿提供太多细节也不要过多。
<!DOCTYPE html>
<html lang="en">
<title>The Title</title>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<style>
body {font-family: "Lato",sans-serif}
.mySlides {display: none}
</style>
<body>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-black w3-card">
<a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">VARC Home</a>
<a href="portfolio_review.html" class="w3-bar-item w3-button w3-padding-large">About</a>
<a href="search.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">Project Search</a>
<a href="#methods" class="w3-bar-item w3-button w3-padding-large w3-hide-small">Methods</a>
<div class="w3-dropdown-hover w3-hide-small">
<button class="w3-padding-large w3-button" title="More">Data <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="Overview.html" class="w3-bar-item w3-button">Overview</a>
<a href="Relevance.html#" class="w3-bar-item w3-button">Access Relevance</a>
<a href="Type.html" class="w3-bar-item w3-button">Access Type</a>
<a href="Community.html" class="w3-bar-item w3-button">Community Care and Virtual Care</a>
<a href="model.html" class="w3-bar-item w3-button">Model Classification</a>
<a href="implementation.html" class="w3-bar-item w3-button">Implementation Status</a>
<a href="Priorities.html" class="w3-bar-item w3-button">OVAC Priorities</a>
<a href="Projecttype.html" class="w3-bar-item w3-button">Project Type</a>
<a href="Caretype.html" class="w3-bar-item w3-button">Type of Care</a>
</div>
</div>
<a href="javascript:void(0)" class="w3-padding-large w3-hover-red w3-hide-small w3-right"><i class="fa fa-search"></i></a>
</div>
</div>
<!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
<a href="#results" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">Results</a>
<a href="#search" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">Project Search</a>
<a href="#contact" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">Methods</a>
<a href="#overview" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">Overview</a>
<a href="#relevance" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">Access Relevance</a>
<a href="#type" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">Access Type</a>
<a href="#community" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">Community Care and Virtual Care</a>
<a href="#Model" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">Model Classification</a>
<a href="#implementation" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">Implementation Status</a>
<a href="#priorities" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">OVAC Priorities</a>
<a href="#projecttype" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">Project Type</a>
<a href="#caretype" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">Care Type</a>
</div>
<!-- Page content -->
<div class="w3-content" style="max-width:2000px;margin-top:46px">
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<style>
body {
margin: 20px auto;
font-family: 'Lato';
font-weight: 300;
text-align: center;
}
#pie-chart {
margin: 4 auto;
height: 575px;
}
</style>
<body style="background-color:black;">
<center>
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id="pie-chart"></div>
</body>
<script>
var pieDiv = document.getElementById("pie-chart");
pie_chart = {
'data': [{
'labels': ['<b>Primary Care</b>','<b>Specialty Care</b>','<b>Mental Health</b>','<b>Inpatient/Acute Care</b>','<b>Long-term Care</b>','<b>General Care/Not Specified</b>'],'values': [4,21,8,1,14],'textinfo': 'percent','text': ['<b> Description</b>: Projects focused on primary care.','<b> Description</b>: Projects focused on specialty care.','<b> Description</b>: Projects focused on mental health','<b> Description</b>: Projects focused on inpatient/acute care','<b> Description</b>: Projects focused on long-term care','<b> Description</b>: The type of care is not indicated or is not specific to one type'],'type': 'pie','name': "Care Types",'hole': .4,'hoverinfo': 'label+percent+text','sort': false,}],'layout': {
'title': 'Type of Clinical Care Setting'+'<br>'+'N = 50'
}
}
Plotly.newPlot('pie-chart',pie_chart.data,pie_chart.layout);</script>
</div></div></div></div></div></div></div></div>
<style>
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;
}
</style>
<!-- Extra large modal -->
<<!-- Trigger the modal with a button -->
<!-- Extra large modal -->
<div style="text-align: center;">
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".cd-example-modal-xl">Data DeFinitions</button></div>
<div class="modal fade cd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content"><h5> Care Type DeFinitions </h5> <br><table>
<tr>
<th>Field</th>
<th>DeFinition</th>
</tr>
<tr>
<td>Primary Care</td>
<td>The project is focused on primary care</td>
</tr>
<tr>
<td>Specialty Care</td>
<td>The project is focused on specialty care</td>
</tr>
<tr>
<td>Mental Health</td>
<td>The project is focused on mental health</td>
</tr>
<tr>
<td>Inpatient Care/Acute Care</td>
<td>The project is focused on inpatient/acute care</td>
</tr>
<tr>
<td>Long-term Care</td>
<td>The project is focused on long-term care</td>
</tr>
<tr>
<td>General Care/Not Specified</td>
<td>The type of care is not indicated or is not specific to one type</td>
</tr>
</table>
<p><br>
</div> <div style="text-align: center;"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div></div>
</div>
</div>
</div>
</div><div style="text-align: center;">
<p style="background-color:black;color:white;"><br>
Last updated on 7/20/2020</div></p>
</body>
解决方法
Bootstrap具有出色的网格系统，可以帮助您实现这一目标。
考虑执行以下代码段：
<div class="container">
<div class="row">
<div class="col">
<!-- DESCRIPTION -->
</div>
<div class="col">
<!-- DIAGRAM -->
</div>
</div>
</div>
此链接应提供有关网格系统的更多信息和示例：Bootstrap Grid System
请确保您导入引导程序，以使这些类正常工作：Getting Started with Bootstrap
如果您不希望实现引导程序，则这里的链接将帮助您实现当前样式表中的相同功能。使用Bootstrap只是简化了在样式表中实现这些类的需要：CSS Grid Layout
,如果我了解您要做什么，我会说您不需要网格。我将创建一个父div，在该父div内，我将包括其他两个div：第一个子div将包含数据描述，而另一个将包含图表本身。然后，我将“ display：flex”应用于父级 div。然后，div将并排放置。像这样：
<div style="display: flex">
<div>
Data description
</div>
<div>
Chart
</div>
</div>
除了您的代码和@El donny提供的答案外，我建议在您已经拥有的<body>标签内执行以下操作：
body {
margin: 0;
padding: 0;
}
#content {
display: flex;
height: 100vw;
}
#description {
background-color: black;
color: white;
width: 50%;
}<div id="content">
<div id="description">Description</div>
<div id="pie-chart">Pie</div>
</div>
**示例的样式仅供您查看结果**