简单 DIV 问题 - 想要拆分 div，右侧显示 plotly.js 图表，左侧显示描述（可能想多了）

Question

我正在为我们的客户创建一些数据可视化，他们要求我将数据图表的描述放在左侧，数据图表放在右侧。显然我需要创建一个分隔线将其一分为二，但我想多了。我如何获得想要的输出，如下面的 link？

我想提供完整的上下文代码。我知道包括我的菜单和参考资料很烦人，但我宁愿提供太多细节也不愿提供太少细节。

<!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, 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>

Answer 1

Bootstrap 有一个很棒的网格系统可以帮助你完成这个。

考虑执行以下代码段：

<div class="container">
  <div class="row">
    <div class="col">
      <!-- DESCRIPTION -->
    </div>
    <div class="col">
      <!-- DIAGRAM -->
    </div>
  </div>
</div>

此 link 应提供有关网格系统的更多信息和示例：Bootstrap Grid System

确保导入 bootstrap 以便类工作：Getting Started with Bootstrap

如果您不想实施 bootstrap，这里有一个 link 可以帮助您在当前风格 sheet 中实施相同的功能。使用 Bootstrap 只是简化了在您的风格 sheet 中实现这些类的需要：CSS Grid Layout

Answer 2

如果我明白你想做什么，我会说你不需要网格。我会创建一个父 div 并在这个父 div 内，我会包括另外两个 div：第一个子 div 将包含数据的描述，另一个一个将包含图表本身。然后我将 'display: flex' 应用到 parent div。 div 将并排排列。像这样：

    <div style="display: flex">
      <div>
        Data description
      </div>

      <div>
        Chart
      </div>
    </div>

Answer 3

与您的代码和@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>

** 例子的样式只是为了让你看到结果**

简单 DIV 问题 - 想要拆分 div，右侧显示 plotly.js 图表，左侧显示描述（可能想多了）

Simple DIV question - want a split div with right side showing plotly.js graph and left side showing description (likely overthinking this)

javascript

html

css

plotly

plotly.js