Reputation: 12852

alignment of div in css

    <span>Text</span>
<div class="ui-icon ui-icon-circle-arrow-e abc" style=" display:block; border-width:2px; border-style:solid; border-color:red;"></div>
<span>Text</span>
<div class="ui-icon ui-icon-circle-arrow-e abc" style=" display:block; border-width:2px; border-style:solid; border-color:red;"></div>
<span>Text</span>
<div class="ui-icon ui-icon-circle-arrow-e abc" style=" display:block; border-width:2px; border-style:solid; border-color:red;"></div>
<span>Text</span>
<div class="ui-icon ui-icon-circle-arrow-e abc" style=" display:block; border-width:2px; border-style:solid; border-color:red;"></div>

Will produce

enter image description here

How can I format the above code to look like the following

enter image description here

The property float: left is not working as I desired. If I use this for div, all the divs will come first. Then all the span will come second.

Upvotes: 0

Answers (5)

manny

Reputation: 1948

try this

<span style="float:left;">Text</span><div class="ui-icon ui-icon-circle-arrow-e abc" style="float:left; width:20px; border-width:2px; border-style:solid; border-color:red;"></div>
<span style="float:left;">Text</span><div class="ui-icon ui-icon-circle-arrow-e abc" style="float:left; width:20px; border-width:2px; border-style:solid; border-color:red;"></div>
<span style="float:left;">Text</span><div class="ui-icon ui-icon-circle-arrow-e abc" style="float:left; width:20px; border-width:2px; border-style:solid; border-color:red;"></div>

Upvotes: 0

user900360

Reputation:

you can use display:inline for divs.
use a css class named : "flt_lt" and .flt_lt{float:left;} don't forget to put a <br class="cls" /> where .cls{clear:both;}
put this br after the last div you want in a row.

Upvotes: 0