Question

我正在一个项目中显示项目列表。我使用float：left使标题显示在图标旁边，但问题是第一个元素旁边的所有元素都出现在同一行（种类）上。

.icon
  width: 150px
  float: left

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这是项目的link：

Answer 1

在内容部分尝试一下

<div style={{clear: 'both'}}>{val.overview}</div>

Answer 2

如果使用浮点数，请记住在之后将其清除。例如，干净的方法可以使用.box上的伪元素：

.box
  width: 600px
  &:after
    content: ''
    clear: both
    display: block

演示：https://codepen.io/anon/pen/ZRgjzr?editors=0110

浮动左不工作在无礼

2 个答案: