how to customize datalist to be like this?

Answer 1

Set the RepeatLayout property to flow so it will use SPANs instead of TABLE

<asp:DataList RepeatLayout="Flow" ItemStyle="float:left;">

You can also use the ItemStyle property to add the CSS Float Property to each of the items to control how they will floats and also account for the element's contents.