如何使父div宽度缩小以准确包装子imgs？

时间：2014-03-09 03:28:59

标签： html css center

Jsfiddle：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>

可能有很多＆lt; img＆gt;和换行符。父div总是扩展到100％宽度，无法准确包装图像 我现在得到的结果（右边的间距）： enter image description here
我想要的结果是： enter image description here

6 个答案:

答案 0 :(得分：1)

单独使用CSS并不是一种简单的方法。您必须编写一堆媒体查询以适应容器的每个宽度 - 具体取决于容器中有多少项/列。

话虽这么说，我曾写过一些生成媒体查询的LESS代码。

FIDDLE或CODEPEN (Supports LESS)

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

设置这样的迭代混合:(您可以将此代码粘贴到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);

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

@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;
  }
}

所以使用简单的标记，如：

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

剩下的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;
}

...你得到了理想的结果。

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

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

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

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

...瞧，我得到这个CODEPEN

答案 1 :(得分：0)

首先，规范你的CSS。

其次，display: inline-block;位于图片上，display: block;位于容器上。

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

答案 2 :(得分：0)

我理解你的问题，试试这段代码

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

上面的代码每行包含1个图像，因为我已将宽度设置为70px，具体取决于每行所需的图像数量，请设置宽度，例如每行3个图像（3x60px = 180px + 10px用于填充）。希望它有效。祝你有愉快的一天。

答案 3 :(得分：0)

一个小jQuery会帮助你：

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

非jQuery解决方案

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

答案 4 :(得分：0)

您可以使用flexbox轻松完成此操作而不会受到太大影响。代码如下所示：

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; 
}

工作笔：https://codepen.io/pen/?editors=0100;

希望有帮助：）

答案 5 :(得分：0)

.main {
  border: 10px solid red;
  padding:10px;
  display: flex;
  flex-flow: wrap;
  background-color:yellow!important;
}

 .main div {
 
  flex-grow: 1;
  border: 1px solid black;
}

.main div.nogrow{
  flex-grow: 0;
  }
<div class="main" >
  <div class="nogrow" style="background-color:coral;">dsfddsfdfA</div>
  <div class="nogrow" style="background-color:lightblue;">dfdfdfdB</div>
  <div class="nogrow" style="background-color:khaki;">dfdfdf d fd fdC</div>
  <div class="nogrow" style="background-color:pink;">Ddssd sdf sdf</div>
  <div class="nogrow" style="background-color:lightgrey;"> df df df ddf dfE</div>
  <div class="nogrow" style="background-color:lightgreen;"> dfd fd df dfdF</div>
</div>

@TrungDQ感谢您的支持。我有一个类似的问题，但是宽度是动态的，并且不要在右侧留空。你能看看吗？ https://jsfiddle.net/phyle5/07pwdy12/请调整大小并查看。

相关问题
最新问题