在浮动 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 添加 margin and/or padding 以对齐它们。

.indented_notif_text {
    margin-left:20px;
}

JSFIDDLE 1

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

JSFIDDLE 2

Answer 2

最快的方法是在 CSS class:

中添加一个 "height" 参数（如果您的容器具有固定高度的静态内容）

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

或者在文本容器中留出边距（等于复选框宽度）。