0

我有一个图像（img标签）和一个 div，其display属性设置为flex.
div并img排成一排。它们是漂浮的。
我想应用margin-left到 div 但它不起作用，除非我将显示属性设置为divto inline-block。
我探索了 StackoverFlow，与我的案例最近的帖子是这个。但是，这样的帖子并没有让我明白发生了什么。如下图所示，左侧div的边距与图像重叠。为什么？为什么不把 div 推到右边？：在此处输入图像描述

这是我的代码：
html

<div id="traffic">
  <p>Traffic</p>
  <img  id="chart" src="https://www.syncfusion.com/products/flutter/control/images/chart/chart-types/flutter-multiple-axis-charts.png" alt="" srcset="">
  <div id="traffic-infos"></div>
</div>

css

#traffic {
  background-color: rgb(255, 255, 255);
  padding: 15px 15px 15px 15px;
  overflow: auto;  /* so the container resized its height */
}

#traffic-infos {
  display: flex;
  flex-direction: column;
  margin-left: 40px;
  height: 300px;
  background-color: black;

}
#chart{
  width: 100%;
  max-width: 850px;
  min-width: 600px;
  height: auto;
  float: left;
}

JsFiddle 中的相同代码：https ://jsfiddle.net/shahryarslg/xmo5uahv/8/

如果我将班级更改display为. 但我想了解与这个问题有什么关系？这是怎么回事？提前致谢。traffic-infosinline-blockdisplay

4

1 回答 1

0

您需要在浮动元素上设置边距：

#chart {
  margin-right: 40px;
}
于 2019-12-07T22:32:17.343 回答