Question

我有一条vocab_labels, vocab_values = zip(*Counter(C).items()) sorted_values = sorted(vocab_values)[::-1] sorted_labels = [x for (y,x) in sorted(zip(vocab_values,vocab_labels))][::-1] indexes = np.arange(len(sorted_labels[:10])) width = 1 plt.bar(indexes, sorted_values[:10]) plt.xticks(indexes + width * 0.1, sorted_labels[:10]) plt.show()的水平线，我想一直保持在一起，并且右边有一个浮动元素。当浮点数与div的行重叠时，此刻它会将div分为两行。我想发生的是将div的行移到浮点下方，类似于在空间不足时将“标题”一词移到浮点下方。

我尝试过div，但这不会导致div垂直移动，它只会将其放在浮点后面。我也尝试过white-space: no-wrap，但是即使盒子可以放得更远，也可以将它向下移动。

示例（可调整大小的框）：

clear: right

h2 {
  margin: 0;
}

.outer {
  border: solid;
  resize: horizontal;
  overflow-x: auto;
  padding-bottom: 20px;
}

.right {
  float: right;
  width: 100px;
  height: 50px;
  background: red;
}

.pair {
  /* white-space: nowrap; */
}

.pair > * {
  display: inline-block;
  padding: 2px;
  margin: 0 2px;
  background: lightGreen;
}

Answer 1

您应该将pair元素设置为inline-block，因为默认情况下，块元素会与float元素重叠，而不像inline level元素会包裹float元素。

float CSS属性在其容器的左侧或右侧放置一个元素，从而允许文本和内联元素将其环绕。^ref < / p>

h2 {
  margin: 0;
}

.outer {
  border: solid;
  resize: horizontal;
  overflow-x: auto;
  padding-bottom: 20px;
}

.right {
  float: right;
  width: 100px;
  height: 50px;
  background: red;
}

.pair {
   /*white-space: nowrap; not needed*/
   display:inline-block;
}

.pair > * {
  display: inline-block;
  margin: 0 2px;
  padding: 2px;
  background: lightGreen;
}

<div class="outer">
  <div class="right"></div>
  <h2>A Heading</h2>
  <div class="pair">
    <div>This is a box</div>
    <div>This is a wide box</div>
  </div>
</div>

将元素保持在一行上，必要时在浮点下方

1 个答案: