IE6, 7 lines

Html

<Div class = "Left"> <Div class = "channel Clearfix"> <span> brand marketing </span> <Div class = "content"> <A> brand exposure </A> <A> brand interaction </a> <A> brand identification </A> <A> decision making tool </a> </div> <Div class = "channel Clearfix"> <span> effect marketing </span> <Div class = "content"> <A> Zhixin promotion </a> <A> Search promotion </ a> <A> mobile search promotion </a> </div> <Div class = "channel Clearfix"> <span> display promotion </span> <Div class = "content"> <A> network alliance promotion </a> <A> mobile network alliance </a> <A> creative experts </a> </div> </Div >... </div> <Div class = "right"> <Div class = "channel Clearfix"> <span> brand marketing </span> <Div class = "content"> <> brand exposure </a> <A> brand interaction </a> <A> brand identification </A> <A> decision making tool </a> </div> </ div> <Div class = "channel Clearfix"> <span> effectiveness marketing </span> <Div class = "content"> <A> Zhixin promotion </a> <A> search promotion </a> <A> mobile search promotion </a> </div> <Div class = "channel Clearfix"> <span> display promotion </ span> <Div class = "content"> <A> network alliance promotion </a> <A> mobile network alliance </a> <A> creative experts </a> </Div> </div>... </div>

 

CSS

. Wrap. left {float: Left; width: 360px; margin: 0 10px 30px 30px ;}. wrap. right {float: Right; margin: 0 30px 30px 0 ;}. wrap. channel {padding: 20px 10px 0 10px; font-size: 15px ;}. channel span {float: Left; width: 100px; Vertical-align: Top ;}. channel A {white-space: nowrap; // if this CSS is not available, a strange line break occurs: float: Left; color: #999; text-Decoration: none; font-size: 12px; margin: 3px 5px 3px ;}

Line Effect

 

Expected results

Solution: Add white-space: nowrap to the <A> (or the Li and span values of float)

IE6, 7 lines