如何使父div宽度缩小以准确地包装子img？ [英] How to make parent div width shrink to wrap exactly the child imgs?

问题描述

Jsfiddle此处：或 CODEPEN（支持LESS）

以下是利用LESS设置媒体查询的方法：

设置迭代混合像这样：（您可以将此代码粘贴到 http://less2css.org ）

  @ item-width：100px; 
 @ item-height：100px; 
 @margin：5px; 
 @ min-cols：2; 
 @ max-cols：12; //设置要为
 
 
编写媒体查询的列的上限。loopingClass（@ index-width）当（@ index-width< = @ item-宽度* @ max-cols）{
 @media（min-width：@ index-width）{
 #content {
 width：@ index-width; 
} 
} 
 
 .loopingClass（@ index-width + @ item-width）; 
} 
 
 .loopingClass（@ item-width * @ min-cols）; 
  

上面的mixin将以以下形式吐出一系列媒体查询：

  @media（最小宽度：200px）{
 #content {
宽度：200px; 
} 
} 
 @media（最小宽度：300px）{
 #content {
宽度：300px; 
} 
} 
 @media（最小宽度：400px）{
 #content {
宽度：400px; 
} 
} 
 ... 
 @media（最小宽度：1200px）{
 #content {
宽度：1200px; 
} 
} 
  

因此可以使用简单的标记，例如：

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

使用剩余CSS（无）：

  #content {
 margin：0 auto; 
溢出：自动； 
 min-width：@ min-cols * @ item-width; 
最大宽度：@ max-cols * @ item-width; 
显示：块； 
 list-style：none; 
背景：浅绿色； 
} 
 .box {
 float：left; 
高度：@ item-height-2 * @ margin; 
宽度：@ item-width-2 * @ margin； 
保证金：@保证金； 
 background-color：blue; 
} 
  

...您会得到理想的结果。

...而且自定义布局非常容易：

我要做的就是更改我根据需要在LESS mixin中使用的变量-得到的确切布局。

因此，假设我有300px X 100px的项目最少2列，最多6列，边距为15px-我只是像这样修改变量：

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

...瞧，我得到这个 CODEPEN

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:

解决方案

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

这篇关于如何使父div宽度缩小以准确地包装子img？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！