在浮动div包装文本后停止div

Question

我有漂浮物的问题。

请参阅http://jsfiddle.net/hhbjf2wv/4/

<div>
  <div style="float:left; width:20px;">
    <input type="checkbox">
  </div>
  <div>

    Just some long long long text Just some long long long textJust some long long long textJust some long long long textJust some long long long text Just some long long long text Just some long long long textJust some long long long textJust some long long long textJust some long long long text

  </div>
</div>

我希望能够使复选框旁边的描述成为一个合适的列（所有的行都是相同的缩进，没有包装到最左边的第一次机会）。我该怎么做？

Answer 1

您可以将边距和/或填充添加到包含要对齐它们的文本的div中。

.indented_notif_text {
    margin-left:20px;
}

JSFIDDLE 1

.indented_notif_text {
    margin-left:20px;
    padding-left:20px;
}

JSFIDDLE 2

Answer 2

最快的方法是在CSS类中添加一个“height”参数（如果你的容器有一个固定高度的静态内容）：

.notif_checkbox 
{
    float:left;
    width:20px;
    height: 100px;
    background: red;
}

或将左边距（等于复选框宽度）放到文本容器中。