首页 文章

流体宽度等间距DIV

提问于
浏览 次
308

我有一个流体宽度的容器DIV .

在这里我有4个DIV全部300px x 250px ...

<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
   <div class="box4"> </div>
</div>

我想要发生的是箱子1向左浮动，箱子4向右浮动，箱子2和3在它们之间均匀间隔 . 我希望间距也是流畅的，因此当浏览器变小时，空间也会变小 .

enter image description here

html css fluid-layout

7 回答

  • 1

    如果您知道每个“行”的元素数量和容器的宽度，您可以使用选择器为元素添加边距，从而导致合理的外观 .

    我有三行我想要合理的行，所以使用了：

    .tile:nth-child(3n+2) { margin: 0 10px }

    这允许每行中的中心div具有一个边距，迫使第一和第三div到容器的外边缘

    也适用于边框背景颜色等其他东西

    回复于
  • 21

    See: http://jsfiddle.net/thirtydot/EDp8R/

    • 这适用于 IE6+ and all modern browsers!

    • 我已将您要求的尺寸减半，以便更容易使用 .

    • text-align: justify 与 .stretch 相结合是处理定位的原因 .

    • display:inline-block; *display:inline; zoom:1 修复 inline-block for IE6 / 7，see here .

    • font-size: 0; line-height: 0 修复了IE6中的一个小问题 .

    #container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /* just for demo */
  min-width: 612px;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}

    <div id="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <span class="stretch"></span>
</div>

    额外的 span （ .stretch ）可以替换为 :after .

    这个 still works 在与上述解决方案相同的所有浏览器中 . :after 无论如何都没有使用 distribute-all-lines ，所以没关系 .

    See: http://jsfiddle.net/thirtydot/EDp8R/3/

    :after 有一个小缺点：要使最后一行在Safari中完美运行，你必须小心HTML中的空格 .

    具体来说，这不起作用：

    <div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div>
</div>

    这样做：

    <div id="container">
    ..
    <div class="box3"></div>
    <div class="box4"></div></div>

    您可以将此用于任意数量的子 div ，而无需通过更改为每个子项添加 boxN 类

    .box1, .box2, .box3, .box4 { ...

    至

    #container > div { ...

    这将选择任何作为 #container div的第一个子节点的div，而不是它下面的其他div . 要概括背景颜色，您可以使用CSS3 nth-order selector，尽管它仅在IE9和其他现代浏览器中受支持：

    .box1, .box3 { ...

    变为：

    #container > div:nth-child(odd) { ...

    See here 为jsfiddle示例 .

    回复于
  • 124

    其他帖子提到了flexbox，但如果 more than one row of items is necessary ，flexbox的 space-between 属性 fails （见帖子末尾）

    到目前为止，唯一的解决方案是使用

    CSS网格布局模块（Codepen演示）

    基本上相关的代码必须归结为：

    ul {
  display: grid; /* (1) */
  grid-template-columns: repeat(auto-fit, 120px); /* (2) */
  grid-gap: 1rem; /* (3) */
  justify-content: space-between; /* (4) */
  align-content: flex-start; /* (5) */
}

    1）使容器元素成为网格容器

    2）根据需要设置网格数量为'auto'列 . 这是为响应式布局完成的 . 每列的宽度为120px . （注意使用 auto-fit （与 auto-fill 相对应）（对于1行布局）将空轨道折叠为0 - 允许项目展开以占用剩余空间 . （查看 this demo 以查看我在说什么关于） ） .

    3）为网格行和列设置间隙/排水沟 - 这里，因为想要'space-between'布局 - 间隙实际上是 minimum gap ，因为它将根据需要增长 .

    4）和5） - 类似于flexbox .

    body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  grid-gap: 1rem;
  justify-content: space-between;
  align-content: flex-start;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
}
li {
  background: tomato;
  height: 120px;
}

    <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

    Codepen演示（调整大小以查看效果）

    浏览器支持 - Caniuse

    目前支持Chrome（Blink），Firefox，Safari和Edge！ ......得到IE的部分支持（参见Rachel Andrew撰写的this post）

    NB：

    Flexbox的 space-between 属性适用于一行项目，但当应用于包装其项目的Flex容器时（使用 flex-wrap: wrap ） - 失败，因为您无法控制最后一行项目的对齐;最后一行总是合理的（通常不是你想要的）

    展示：

    body {
  margin: 0;
}
ul {
  
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
  
}
li {
  background: tomato;
  width: 110px;
  height: 80px;
  margin-bottom: 1rem;
}

    <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

    Codepen（调整大小以查看我在说什么）

    进一步阅读CSS网格：

    回复于
  • 1

    现在最简单的方法是使用flexbox：

    http://css-tricks.com/snippets/css/a-guide-to-flexbox/

    那么CSS就是：

    #container {
    display: flex;
    justify-content: space-between;
}

    演示：http://jsfiddle.net/QPrk3/

    However ，目前仅支持相对较新的浏览器（http://caniuse.com/flexbox） . 此外，flexbox布局的规范已经改变了几次，因此可以通过另外包括更旧的语法来覆盖更多的浏览器：

    http://css-tricks.com/old-flexbox-and-new-flexbox/

    http://css-tricks.com/using-flexbox/

    回复于
  • 1

    在 jQuery 中，您可以直接定位父级 .

    如果您不知道有多少儿童将被动态添加或者您无法计算出他们的数字，那么这是有用的 .

    var tWidth=0;

$('.children').each(function(i,e){
tWidth += $(e).width();

///Example: If the Children have a padding-left of 10px;..
//You could do instead:
tWidth += ($(e).width()+10);

})
$('#parent').css('width',tWidth);

    This will let the parent grow horizontally as the children are beng added.

    注意：这假定 '.children' 具有 width 和 Height Set

    希望有帮助 .

    回复于
  • 430

    如果 css3 是一个选项，可以使用css calc() 函数完成 .

    案例1：在单行上对齐方框（FIDDLE）

    标记很简单 - 一堆带有一些容器元素的div .

    CSS看起来像这样：

    div
{
    height: 100px;
    float: left;
    background:pink;
    width: 50px;
    margin-right: calc((100% - 300px) / 5 - 1px); 
}
div:last-child
{
    margin-right:0;
}

    其中-1px来修复IE9计算/舍入错误 - 请参阅here

    案例2：在多行上对齐方框（FIDDLE）

    这里，除了 calc() 函数之外， media queries 是必需的 .

    基本思想是为每个#columns状态设置媒体查询，然后我使用calc（）计算每个元素的边距（除了最后一列中的元素） .

    这听起来像很多工作，但如果你使用LESS或SASS，这可以很容易地完成

    （它仍然可以通过常规css完成，但是你必须手动完成所有计算，然后如果你改变你的盒子宽度 - 你必须再次计算出所有的东西）

    下面是使用LESS的示例:(您可以复制/粘贴此代码here进行播放有了它，[它也是我用来生成上述小提琴的代码]）

    @min-margin: 15px;
@div-width: 150px;

@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);

@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);


*{margin:0;padding:0;}

.container
{
    overflow: auto;
    display: block;
    min-width: @3divs-width;
}
.container > div
{
    margin-bottom: 20px;
    width: @div-width;
    height: 100px;
    background: blue;
    float:left;
    color: #fff;
    text-align: center;
}

@media (max-width: @3divs-width) {
    .container > div {  
        margin-right: @min-margin;
    }
    .container > div:nth-child(3n) {  
        margin-right: 0;
    }
}

@media (min-width: @3divs-width) and (max-width: @4divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
    }
    .container > div:nth-child(3n) {  
        margin-right: 0;
    }
}

@media (min-width: @4divs-width) and (max-width: @5divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
    }
    .container > div:nth-child(4n) {  
        margin-right: 0;
    }
}

@media (min-width: @5divs-width) and (max-width: @6divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
    }
    .container > div:nth-child(5n) {  
        margin-right: 0;
    }
}

@media (min-width: @6divs-width){
    .container > div {  
        margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
    }
    .container > div:nth-child(6n) {  
        margin-right: 0;
    }
}

    所以基本上你首先需要在盒子之间决定你想要的盒子宽度和最小边距 .

    有了它，您可以计算出每个州需要多少空间 .

    然后，使用calc（）计算右边距，使用nth-child从最后一列的框中删除右边距 .

    对于使用 text-align:justify 的已接受答案，这个答案的 advantage 就是当你有多行的方框时 - 最后一行的方框't get '要求第一个方框在左边而下一个方框要在在右边 - 而是盒子按顺序相互跟随 .

    关于 browser support ：这适用于IE9，Firefox，Chrome，Safari6.0 - （详见here）但是我注意到在IE9上媒体查询状态之间存在一些小问题 . [如果有人知道如何解决这个我真的很想知道:)] < - FIXED HERE

    回复于
  • 10

    这对我来说有5个不同尺寸的图像 .

    • 创建一个容器div

    • 图像的无序列表

    • 在css上，必须垂直显示未编号且没有项目符号

    • 证明容器div的内容

    这是因为proty-content：space-between，它位于列表中，水平显示 .

    在CSS上

    #container {
            display: flex;
            justify-content: space-between;
 }
    #container ul li{ display:inline; list-style-type:none;
}

    在HTML上

    <div id="container"> 
  <ul>  
        <li><img src="box1.png"><li>
        <li><img src="box2.png"><li>
        <li><img src="box3.png"><li>
        <li><img src="box4.png"><li>
        <li><img src="box5.png"><li>
    </ul>
</div>
    回复于

相关问题