How to make parent div width shrink to wrap exactly the child imgs?

问题

Jsfiddle here: http://jsfiddle.net/zxJbV/

<div class="container" style="border:1px solid black;text-align:left">
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
</div>

There may be many <img>s and newlines. The parent div always expand to the 100% width and can't wrap the images exactly.
The result I got now(with spacing on the right):

The result I want is like:

回答1:

There's no easy way of doing this with CSS alone. You'll have to write a bunch media queries to suit every width the container will have - depending on how many items/columns there are in your container.

That being said, I once wrote some LESS code which generates the media queries.

FIDDLE or CODEPEN (Supports LESS)

Here's how to take advantage of LESS to set up the media queries:

Set up an iteration mixin like this: (You can paste this code into http://less2css.org)

@item-width:100px;
@item-height:100px;
@margin: 5px;
@min-cols:2;
@max-cols:12; //set an upper limit of how may columns you want to write the media queries for


.loopingClass (@index-width) when (@index-width <= @item-width * @max-cols) {
    @media (min-width:@index-width) {
        #content{
            width: @index-width;
        }
    }

    .loopingClass(@index-width + @item-width);
}

.loopingClass (@item-width * @min-cols);

The above mixin will spit out a series of media queries in the form:

@media (min-width: 200px) {
  #content {
    width: 200px;
  }
}
@media (min-width: 300px) {
  #content {
    width: 300px;
  }
}
@media (min-width: 400px) {
  #content {
    width: 400px;
  }
}
...
@media (min-width: 1200px) {
  #content {
    width: 1200px;
  }
}

So with a simple markup like:

<ul id="content">
    <li class="box"></li>
    <li class="box"></li>
    ...
    <li class="box"></li>
</ul>

With remaining CSS (LESS):

 #content {
    margin:0 auto;
    overflow: auto;
    min-width: @min-cols * @item-width;
    max-width: @max-cols * @item-width;
    display: block;
    list-style:none;
    background: aqua;
}
.box {
    float: left;
    height: @item-height - 2 *@margin;
    width: @item-width - 2*@margin;
    margin:@margin;
    background-color:blue;
}

... you get the desired result.

...and it's super easy to customize the layout:

All I need to do is change the variables that I used in the LESS mixin according to my needs - I get the exact layout that I'm after.

So let's say I have items 300px X 100px with a minimum of 2 columns and max 6 columns and a margin of 15px - I just modify the variables like so:

@item-width:300px;
@item-height:100px;
@margin: 15px;
@min-cols:2;
@max-cols:6;

...and voila, I get this CODEPEN

回答2:

Firstly, normalise your css.

Second, display: inline-block; on the images, and display: block; on the container.

http://jsfiddle.net/jshado1/zxJbV/7/

回答3:

I understood your problem, try this code

<div class="container" style="border:1px solid black;width:70px;padding:5px;">
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
</div>

The above code contains 1 image per line because i have set the width to 70px, depending on the number of image you want per line please set the width, for example 3 images per line (3x60px = 180px + 10px for the padding). Hope it works. Have a nice day.

回答4:

A little jQuery will help you:

Javascript:

var IMG_WIDTH = 60; // Define your minimum image width here.
$(function() {
    $(window).resize(function() {
        // $('#debug').html($('.container').width());
        var width = $('.container').width();
        if (width % IMG_WIDTH != 0) {
            $('.container img').css({
                width: width / Math.floor(width / 60),
                height: width / Math.floor(width / 60)
            });
        }
    }).resize();
});

CSS:

img {
    float: left;
    margin: 0;
}

JSFiddle Demo

Non-jQuery solution

var IMG_WIDTH = 60;
window.onresize = function() {
    var width = document.getElementById('container').offsetWidth;
    if (width % IMG_WIDTH != 0) {
        var imgElements = document.querySelectorAll('#container img');
        Array.prototype.forEach.call(imgElements, function(el, i){
            el.style.width = width / Math.floor(width / 60) + 'px';
            el.style.height = width / Math.floor(width / 60) + 'px';
        });
    }
};
window.onresize();

JSFiddle Demo no jQuery

回答5:

You can do this easily using flexbox and not suffer that much. The code will look like this:

index.html

<div class="container" style="border:1px solid black;text-align:left">
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
    <img src="" style="width:60px;height:60px;" />
</div>

main.css

.container {
  display: flex;
  flex-flow: row wrap;
}
.container img {
  flex: 1; 
}

working pen: https://codepen.io/pen/?editors=0100;

Hope helps :)

来源：https://stackoverflow.com/questions/22278031/how-to-make-parent-div-width-shrink-to-wrap-exactly-the-child-imgs

标签

html

css

center