Friday, 15 March 2013

html - Css trick to conjoin divs -


Is there any way we can add three divs together?

  Hello & lt; Div class = "mainContainer" & gt; & Lt; Div class = "left dev" & gt; & Lt; / Div & gt; & Lt; Div class = "centerdiv" & gt; & Lt; Input id = "txtTest" type = "text" / & gt; & Lt; / Div & gt; & Lt; Div class = "rightwing" & gt; & Lt; / Div & gt; & Lt; / Div & gt; world!  

We have to present the code like this here:

Hello & lt; * LeftDiv * & gt; & Lt; * Center with textbox * Device * & gt; & Lt; * Writeth * & gt; World

I tried to use float: LeftDiv, CenterDiv and left on RightDiv but CSS also affects main container. I need to set height and width of left Dave and Wright on CSS, but I can not do this without float.

Thanks in advance.

Edit: The question was added - when Left Dive, Centrifuge and Writitude is released, why is the main container affected? I just want to meet three internal divs without affecting the behavior of the parents ...


Display with display: Inline blocks do not work as expected but do spans.

  Hello & lt; Span class = "mainContainer" & gt; & Lt; Span class = "LeftDiv" & gt; & Lt; / Span & gt; & Lt; Span class = "centerDiv" & gt; & Lt; Input id = "txtTest" type = "text" / & gt; & Lt; / Span & gt; & Lt; Span class = "wrightdiv" & gt; & Lt; / Span & gt; & Lt; / Span & gt; world!   

and spans should not be a place among them because most browsers will present them with a white space in the middle ... =)

(Answer for future reference)

You use inline-block Can not "linebreak" before divs,

/ * for galco / display: inline-block; }

Try the goog-inline-block class defined in the libraries - it is believed that all major browsers are included


No comments:

Post a Comment