Responsive display: Inline-block

How to develop a responsive site which size can be adjusted while the display is still able to maintain its sequence and order, displaying a meaning page without running out of order?

Basically just have to add an attribute in the style of the div tag will do. For the main div, add display:inline-block in style, while the div’s in the main div will have to add float:left in style. While all the UI controls, images, words are in div tag.

div

 

An example from below which I have tried:

Normal web page view

before

Smaller size web page view (mobile)

after

 The code for above UI: Responsive display Inline-block

Web site for own testing:jsfiddle

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s