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.



An example from below which I have tried:

Normal web page view


Smaller size web page view (mobile)


 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: Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.