所有div根据父级中的最大div大小更改位置

时间：2019-12-06 21:16:26

标签： html css bootstrap-4

我正在React中创建此排序可视化应用程序。我已经做好了一切，但是我的渲染有点“不稳定”。

这就是我的意思：我的图结构看起来像这样（我也在使用bootstrap4）：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- -->
<div class="graph" style="height: 500px; width: 500px;">
  <div class="bar" title="56" style="height: 224px; width: 4px; background-color: rgb(0, 107, 160); display: inline-block;"></div>
  <div class="bar" title="104" style="height: 416px; width: 4px; background-color: rgb(42, 184, 255); display: inline-block;"></div>
  <div class="bar" title="65" style="height: 260px; width: 4px; background-color: rgb(0, 124, 186); display: inline-block;"></div>
  <div class="bar" title="6" style="height: 24px; width: 4px; background-color: rgb(0, 11, 17); display: inline-block;"></div>
  <div class="bar" title="51" style="height: 204px; width: 4px; background-color: rgb(0, 97, 146); display: inline-block;"></div>
  <div class="bar" title="31" style="height: 124px; width: 4px; background-color: rgb(0, 59, 89); display: inline-block;"></div>
  ...
</div>
<!-- -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

此内容根据列表的更改而更改。高度和颜色是根据容器的高度与数值成比例计算的。

我注意到的是，当没有一个.bar代表容器的整个高度时，所有的bar都会“跳起来”。我该如何解决？

谢谢。

1 个答案:

答案 0 :(得分：1)

inline-block在这里不适合，因为您必须处理垂直对齐和线框技巧。由于您使用的是引导程序，因此可以依靠flexbox并添加两个类：

.graph  {
  border:1px solid red;
}
.graph > *{
  margin:0 2px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- -->
<div class="graph d-flex align-items-end" style="height: 500px; width: 500px;">
  <div class="bar" title="56" style="height: 224px; width: 4px; background-color: rgb(0, 107, 160); display: inline-block;"></div>
  <div class="bar" title="104" style="height: 416px; width: 4px; background-color: rgb(42, 184, 255); display: inline-block;"></div>
  <div class="bar" title="65" style="height: 260px; width: 4px; background-color: rgb(0, 124, 186); display: inline-block;"></div>
  <div class="bar" title="6" style="height: 24px; width: 4px; background-color: rgb(0, 11, 17); display: inline-block;"></div>
  <div class="bar" title="51" style="height: 204px; width: 4px; background-color: rgb(0, 97, 146); display: inline-block;"></div>
  <div class="bar" title="31" style="height: 124px; width: 4px; background-color: rgb(0, 59, 89); display: inline-block;"></div>
</div>
<!-- -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

使用inline-block，您将不得不增大行高并调整对齐方式

.graph  {
  border:1px solid red;
}
.graph > *{
  vertical-align:bottom;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- -->
<div class="graph" style="height: 500px; width: 500px; line-height:500px;">
  <div class="bar" title="56" style="height: 224px; width: 4px; background-color: rgb(0, 107, 160); display: inline-block;"></div>
  <div class="bar" title="104" style="height: 416px; width: 4px; background-color: rgb(42, 184, 255); display: inline-block;"></div>
  <div class="bar" title="65" style="height: 260px; width: 4px; background-color: rgb(0, 124, 186); display: inline-block;"></div>
  <div class="bar" title="6" style="height: 24px; width: 4px; background-color: rgb(0, 11, 17); display: inline-block;"></div>
  <div class="bar" title="51" style="height: 204px; width: 4px; background-color: rgb(0, 97, 146); display: inline-block;"></div>
  <div class="bar" title="31" style="height: 124px; width: 4px; background-color: rgb(0, 59, 89); display: inline-block;"></div>
</div>
<!-- -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

或添加您制作的height:100%

隐藏元素 

.graph  {
  border:1px solid red;
}
.graph:before{
  content:"";
  display:inline-block;
  height:100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- -->
<div class="graph" style="height: 500px; width: 500px;">
  <div class="bar" title="56" style="height: 224px; width: 4px; background-color: rgb(0, 107, 160); display: inline-block;"></div>
  <div class="bar" title="104" style="height: 416px; width: 4px; background-color: rgb(42, 184, 255); display: inline-block;"></div>
  <div class="bar" title="65" style="height: 260px; width: 4px; background-color: rgb(0, 124, 186); display: inline-block;"></div>
  <div class="bar" title="6" style="height: 24px; width: 4px; background-color: rgb(0, 11, 17); display: inline-block;"></div>
  <div class="bar" title="51" style="height: 204px; width: 4px; background-color: rgb(0, 97, 146); display: inline-block;"></div>
  <div class="bar" title="31" style="height: 124px; width: 4px; background-color: rgb(0, 59, 89); display: inline-block;"></div>
</div>
<!-- -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

相关问题
最新问题