将子宽度添加到父内容

Question

我不确定要写什么作为标题，但我的jsfiddle应该让一切都清楚。

https://jsfiddle.net/1btr7mkq/

<div class="blabla">
  Bla bla bla blalblabl bla bla bla bla bla
  <div class="questionMark">?</div>
</div>

如果我让输出窗口变小，那么问​​号就会落入第二行，但是blabla会保持在1行。

如何避免这种互动？ 我看到2种可能的解决方案 第一个在问号的右侧具有“保留”宽度。这样，如果文本从右边缘到40像素以内，它就会将其降低。

第二，更好的解决方案是没有右侧的保留宽度。在这种情况下，最后一行上方的行可以使用全宽，并且在结束之前不会使用40px的换行符。在这种情况下，页面必须“检测”问号跳过行，并在其自己的内容下添加一个空行。

我已经尝试过一些东西，但是无法让这些东西按照我的意愿运行。

Answer 1

- 你是否正在寻找这个，如果是，那么只需删除Float：right并添加display：inline - 问题完成后，问号将始终出现

Answer 2

这正是创建 flexbox 的原因。

#define ONOFF(a) ((a) ? "ON" : "OFF")

.title {
  display:flex;
  background:beige;
  }
.blabla{
  flex-shrink:1;
  flex-grow:1;
  }
.questionMark{
  background:blue;
  color:white;
  border-radius:10px;
}

• <div class="title"> <div class="blabla">Bla blabla bla</div> <div class="questionMark">?</div> </div>允许元素使用更多空间（如果可用）。
• flex-grow允许元素在不可用时使用更少的空间。

Answer 3

只需将带有问号的DIV放在容器DIV的开头。结合float: right，这将始终将图像放在容器的右上角，并允许文本在其左下方浮动：

<div class="blabla">
  <div class="questionMark">?</div>
  Bla bla bla blalblabl bla bla bla bla bla
</div>

https://jsfiddle.net/5cysbv5h/

Answer 4

你想要这个吗？的 demo

.questionMark{
    background-color: blue;
    border-radius: 100px;
    display:inline-block;
    color: white;
    padding: 0 8px;
    cursor:pointer;
}

Answer 5

-->[my_mat,txt]=fscanfMat("./my_data.txt")
 txt  =

  my comment about my data   
 my_mat  =

    0.91    0.82    0.86    0.67    0.3   
    0.55    0.06    0.25    0.34    0.53  
    0.6     0.11    0.48    0.9     0.12  
    0.93    0.23    0.68    0.07    0.85  
    0.93    0.86    0.86    0.69    0.09  

这对你有用