Выровнять элементы пролета рядом друг с другом

Question

Я разместил три элемента 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

Надежда, что помогает