css - Center float boxes horizontally -

-

I want to display some floating boxes (thumbnails containing divs) and the number of thumbnails depends on the current page width. For example: 

  & lt; Div class = "container" & gt; & Lt; Div square = "box 1" style = "float: left; width: 120px; height: 120px; margin-right: 10px;" & Gt; Thumbnail image here & lt; / Div & gt; & Lt; Div square = "box 2" style = "float: left; width: 120px; height: 120px; margin-right: 10px;" & Gt; Thumbnail image here & lt; / Div & gt; & Lt; Div class = "box3" style = "float: left; width: 120px; height: 120px; margin-right: 10px;" & Gt; Thumbnail image here & lt; / Div & gt; & Lt; Div square = "box 4" style = "float: left; width: 120px; height: 120px; margin-right: 10px;" & Gt; Thumbnail image here & lt; / Div & gt; .......... ETC & lt; / Div & gt;

The problem is that 4 boxes are shown for example in each row for the given width, but these are all left-hand combinations and some white space on the right, I can see horizontally How can I do the center

Something like this: But horizontally centered on the page with boxes ...

Thanks in advance,

< P>

Sorry, but directly with CSS + HTML, whatever you want They are not able to do it (take a look at Pekka for one option, however, if the thumbnail line does not fill the entire row, they will be centered on the last line)

You have a definite criteria- Left: Auto- and margin-right: Auto with the parent object .container on the width that you can do because the page is a liquid width.

Here is how I would like to go about doing this, although there are some bugs to ensure that you will need to work around:

  1. A javascript event Bind to window.resize event
  2. Get new document widths and see how many thumbnails fit in a row
  3. set
    width of the div Container along with that width is a small margin on the right side Always margin-left and margin-right will be automatically
in div

This will centrestage the thumbnail as best as possible. Depending on your visual display, you may need an additional wrapping device to provide a 100% width background.


Comments

Post a Comment

Popular posts from this blog

c# - How to capture HTTP packet with SharpPcap -

-
I would like to capture all incoming HTTP packets on my machine. To do this, I am using SharpPcap which is a WinPcap The cover is. SharpPcap works very well, but it captures TCP packets and what it wants to do for me is a very low level. Does anyone know how can I easily get full HTTP requests / reactions from all these TCP packets? Thanks SharpPcap is already able to capture the packet in the same way That's what the virus does (just in the code instead of the GUI). And you can either either parse them directly or you can put them in the drive in the common .pcap file format. The steps to parse the capture are: Open a connection at any time Loop a while Or start capturing using an event callback Parsing the raw packet for the type you want If you are reading .PPP dump files In addition to calling you an offline capture reader is almost the same, there is no need to select an interface, and you can set the majority There is no need to do the modes. All st...
Read more

php - Multiple Select with Explode: only returns the word "Array" -

-
By using Wordpress I have created a multiple selection box so that users can select categories to exclude. When the page is initially loaded, I see my predefined default option. However, when I select a new value and I save ... I only see the word "Array" and have not chosen anything else? & lt; Class = "amultiple" id = "& lt; php echo $ value ['id'] ;? gt;" name = "& gt; php echo $ value ['id'] ;; gt; []" Multiple = "multiple" size = "8" & gt; & Lt ;? Php global option; Foreign currency ($ value as value $) {if (get_settings ($ value ['id']) === FALSE {$$ value ['id'] = $ value ['std']; } And {$$ value ['id'] = get_settings ($ value ['id']); }} $ Ranges = & amp; Amp; Categories ('type = post & orderbiz = name & amp; hide_empty = 1'); If ($ ranges) {$ ex_cat = implode (',', $ tt_cat_exclude); Forex Currency ($ range a...
Read more

php - jQuery AJAX Post not working -

-
I do not understand why this script does not work. It has something to do within AJAX PostScript / Function. Right now, when I submit my form, it runs php code on the same page. What it should do, send the values ​​of the form for Project_Azax.fp, then there will be a refund of success on the page which is correct or false. $ (document) .ready (function () {$ ('div # didIt'). Hide (); $ ('form [name = adminForm]'). Submit (function () ($ {'.post' ('/ project_ajax.php', {action: $ ('[name = action]') Val (), pId: $ ('[name = pId]'). Val (), name ('[Name = name]'. Val (), url: $ ('[url = url]'). Val (), summary: ('[summary = summary]'). Val ()}, Function (data) {if (data.success) {$ ('div # didIt') .Sliddown ('slow');} and {warning ('unsuccessful SA!');}}, 'Jason'); return false ;});}); What is the code for project_ajax.php below ... if ($ _ POST ['action'] == ...
Read more