并排跨度元素

Question

我在div中并排放置了三个span元素。第三个span元素包含我添加了word-break css属性的文本，这样如果文本超出宽度，文本就会中断。现在，我如何将余量应用于下一行的文本以与上面的行对齐。

<div class="legend_data" style="line-height:18px;word-break:break-word">
  <span class="legend_text" style="float: left;">
    <input type="checkbox" value="test">
  </span>
  <span style="background-color:#32CD32;float: left;width: 12px;
   height: 12px;"></span>
  <span class="legend_text" style="margin-left: 1%;"> sample text  sample  text sample text sample text sample text sample text sample text sample text sample text sample text
  </span>
</div>

jsfiddle link

Answer 1

一些重组可能会让你继续前进。

首先，将<span class="legend_text" style="float: left;">...</span>和<span style="background-color:#32CD32;float: left;width: 12px; height: 12px;"></span>移到一个单独的容器div中，然后将其浮动到左侧，如下所示：

<div class="legend_data_controls">
    <input type="checkbox" value="test">
    <span class="legend_text_box"></span>
</div>

然后将父元素上的overflow:hidden设置为clear floats

.legend_data {
    line-height: 18px;
    word-break: break-word;
    overflow: hidden;
}

那应该是它。

<强> HTML：

<div class="legend_data">
    <div class="legend_data_controls">
        <input type="checkbox" value="test">
        <span class="legend_text_box"></span>
    </div>
    <div class="legend_data_content">
        <span> sample text  sample  text sample text sample text sample text sample text sample text sample text sample text sample text
        </span>
     </div>
</div>

<强> CSS：

.legend_data {
    line-height: 18px;
    word-break: break-word;
    overflow: hidden;
}

.legend_data_controls {
    float: left;
}

.legend_data_controls input {
    vertical-align: middle;
    display: inline-block;
}

.legend_text_box {
    background-color:#32CD32;
    /*float: left;*/
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
}

.legend_data_content {
    margin-left: 50px;
}

<强> Fiddle link

希望有所帮助