Html 具有等距 DIV 的流体宽度

Question

提问by Lee Price

I have a fluid width container DIV.

我有一个流体宽度容器 DIV。

Within this I have 4 DIVs all 300px x 250px...

在这里面我有 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>

What I want to happen is box 1 to be floated left, box 4 to be floated right and box 2 and 3 to be spaced evenly between them. I want the spacing to be fluid as well so as the browser is made smaller the space becomes smaller also.

我想要发生的是框 1 向左浮动，框 4 向右浮动，框 2 和 3 在它们之间均匀间隔。我希望间距也是流动的，以便浏览器变小，空间也变小。

enter image description here

在此处输入图片说明

Answer 1

回答by thirtydot

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

见：http : //jsfiddle.net/thirtydot/EDp8R/

This works in IE6+ and all modern browsers!
I've halved your requested dimensions just to make it easier to work with.
text-align: justifycombined with .stretchis what's handling the positioning.
display:inline-block; *display:inline; zoom:1fixes inline-blockfor IE6/7, see here.
font-size: 0; line-height: 0fixes a minor issue in IE6.

这适用于IE6+ 和所有现代浏览器！
我将您要求的尺寸减半只是为了更容易使用。
text-align: justify结合.stretch是什么处理定位。
display:inline-block; *display:inline; zoom:1inline-block针对 IE6/7 的修复，请参见此处。
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>

The extra span(.stretch) can be replaced with :after.

额外的span( .stretch) 可以替换为:after.

This still worksin all the same browsers as the above solution. :afterdoesn't work in IE6/7, but they're using distribute-all-linesanyway, so it doesn't matter.

这仍然适用于与上述解决方案相同的所有浏览器。:after在 IE6/7 中不起作用，但distribute-all-lines无论如何他们都在使用，所以没关系。

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

见：http : //jsfiddle.net/thirtydot/EDp8R/3/

There's a minor downside to :after: to make the last row work perfectly in Safari, you have to be careful with the whitespace in the HTML.

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

Specifically, this doesn't work:

具体来说，这不起作用：

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

And this does:

这样做：

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

You can use this for any arbitrary number of child divs without adding a boxNclass to each one by changing

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

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

to

到

#container > div { ...

This selects any div that is the first child of the #containerdiv, and no others below it. To generalize the background colors, you can use the CSS3 nth-order selector, although it's only supported in IE9+ and other modern browsers:

这将选择作为 div 的第一个子级的任何#containerdiv，并且没有其他在它之下的子级。要概括背景颜色，您可以使用CSS3 nth-order selector，尽管它仅在 IE9+ 和其他现代浏览器中受支持：

.box1, .box3 { ...

becomes:

变成：

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

See herefor a jsfiddle example.

有关jsfiddle 示例，请参见此处。

Answer 2

回答by Ben Hymanson

The easiest way to do this now is with a flexbox:

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

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

The CSS is then simply:

CSS 就是这样：

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

demo: http://jsfiddle.net/QPrk3/

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

However, this is currently only supported by relatively recent browsers (http://caniuse.com/flexbox). Also, the spec for flexbox layout has changed a few times, so it's possible to cover more browsers by additionally including an older syntax:

但是，目前仅支持相对较新的浏览器 ( http://caniuse.com/flexbox)。此外，flexbox 布局的规范已经更改了几次，因此可以通过额外包含旧语法来覆盖更多浏览器：

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

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

Answer 3

回答by Danield

If css3is an option, this can be done using the css calc()function.

如果css3是一个选项，则可以使用 csscalc()函数来完成。

Case 1: Justifying boxes on a single line ( FIDDLE)

案例 1：单行对齐框 ( FIDDLE)

Markup is simple - a bunch of divs with some container element.

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

CSS looks like this:

CSS看起来像这样：

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

where -1pxto fix an IE9+ calc/rounding bug - see here

其中-1px修复 IE9+ 计算/舍入错误 - 请参见此处

Case 2: Justifying boxes on multiple lines ( FIDDLE)

案例 2：多行对齐框 ( FIDDLE)

Here, in addition to the calc()function, media queriesare necessary.

在这里，除了calc()功能之外，media queries都是必要的。

The basic idea is to set up a media query for each #columns states, where I then use calc() to work out the margin-right on each of the elements (except the ones in the last column).

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

This sounds like a lot of work, but if you're using LESS or SASS this can be done quite easily

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

(It can still be done with regular css, but then you'll have to do all the calculations manually, and then if you change your box width - you have to work out everything again)

（它仍然可以用普通的 css 来完成，但是你必须手动完成所有的计算，然后如果你改变你的框宽度 - 你必须重新计算所有的东西）

Below is an example using LESS: (You can copy/paste this code hereto play with it, [it's also the code I used to generate the above mentioned fiddle])

下面是一个使用 LESS 的例子：（你可以在这里复制/粘贴这段代码来使用它，[这也是我用来生成上述小提琴的代码]）

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

So basically you first need to decide a box-width and a minimum margin that you want between the boxes.

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

With that, you can work out how much space you need for each state.

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

Then, use calc() to calcuate the right margin, and nth-child to remove the right margin from the boxes in the final column.

然后，使用 calc() 计算右边距，并使用 nth-child 从最后一列的框中删除右边距。

The advantageof this answer over the accepted answer which uses text-align:justifyis that when you have more than one row of boxes - the boxes on the final row don't get 'justified' eg: If there are 2 boxes remaining on the final row - I don't want the first box to be on the left and the next one to be on the right - but rather that the boxes follow each other in order.

与使用的已接受答案相比，此答案的优势text-align:justify在于，当您有不止一行框时 - 最后一行上的框不会“合理”，例如：如果最后一行上还剩下 2 个框 - 我不希望第一个框在左侧而下一个框在右侧 - 而是希望这些框按顺序排列。

Regarding browser support: This will work on IE9+,Firefox,Chrome,Safari6.0+ - (see herefor more details) ~~However i noticed that on IE9+ there's a bit of a glitch between media query states. [if someone knows how to fix this i'd really like to know :) ]~~ <-- FIXED HERE

关于浏览器支持：这将适用于 IE9+、Firefox、Chrome、Safari6.0+ -（更多详细信息请参见此处）~~但是我注意到在 IE9+ 上媒体查询状态之间存在一些小故障。[如果有人知道如何解决这个问题，我真的很想知道:)]~~<-- 在这里修复

Answer 4

回答by Danield

Other posts have mentioned flexbox, but if more than one row of items is necessary, flexbox's space-betweenproperty fails(see the end of the post)

其他帖子都提到了flexbox，但是如果需要多于一行，flexbox 的space-between属性就失效了（见文末）

To date, the only clean solution for this is with the

迄今为止，唯一干净的解决方案是使用

CSS Grid Layout Module(Codepen demo)

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

Basically the relevant code necessary boils down to this:

基本上所需的相关代码归结为：

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) Make the container element a grid container

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

2) Set the grid with an 'auto' amount of columns - as necessary. This is done for responsive layouts. The width of each column will be 120px. (Note the use of auto-fit(as apposed to auto-fill) which (for a 1-row layout) collapses empty tracks to 0 - allowing the items to expand to take up the remaining space. (check out this demoto see what I'm talking about) ).

2）根据需要使用“自动”数量的列设置网格。这是为响应式布局完成的。每列的宽度将为 120px。（注意，这里使用的auto-fit（如以并列auto-fill），这（对于1行布局）折叠空轨道0 -允许的项目，以扩大占用的剩余空间（看看这个演示，看看有什么我谈论) )。

3) Set gaps/gutters for the grid rows and columns - here, since want a 'space-between' layout - the gap will actually be a minimum gapbecause it will grow as necessary.

3）为网格行和列设置间隙/装订线 - 在这里，因为想要“间隔”布局 - 间隙实际上将是最小间隙，因为它会根据需要增长。

4) and 5) - Similar to flexbox.

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 demo(Resize to see the effect)

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

Browser Support - Caniuse

浏览器支持 - Caniuse

Currently supported by Chrome (Blink), Firefox, Safari and Edge! ... with partial support from IE (See this postby Rachel Andrew)

目前支持 Chrome (Blink)、Firefox、Safari 和 Edge！...在 IE 的部分支持下（参见Rachel Andrew 的这篇文章）

NB:

注意：

Flexbox's space-betweenproperty works great for one row of items, but when applied to a flex container which wraps it's items - (with flex-wrap: wrap) - fails, because you have no control over the alignment of the last row of items; the last row will alwaysbe justified (usually not what you want)

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

To demonstrate:

展示：

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(Resize to see what i'm talking about)

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

回答by Sebastián Brun Valiente

This worked for me with 5 images in diferent sizes.

这对我有用 5 张不同尺寸的图像。

Create a container div
An Unordered list for the images
On css the unordened must be displayed vertically and without bullets
Justify content of container div

创建容器div
图像的无序列表
在 css 上，unordered 必须垂直显示并且没有项目符号
对齐容器 div 的内容

This works because of justify-content:space-between, and it's on a list, displayed horizontally.

这是因为 justify-content:space-between，它在一个列表中，水平显示。

On CSS

在 CSS 上

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

On html

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

Answer 6

回答by ErickBest

in jQueryyou might target the Parent directly.

在jQuery你可能会直接针对家长。

THIS IS USEFUL IF YOU DO NOT KNOW EXACTLY HOW MANY CHILDREN WILL BE ADDED DYNAMICALLY or IF YOU JUST CAN'T FIGURE OUT THEIR NUMBER.

如果您不确切知道将动态添加多少个孩子，或者您只是无法计算出他们的数量，这将很有用。

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 parentgrow horizontally as the childrenare beng added.

这将使parent随着children被弯曲的增加而水平增长。

NOTE: This assumes that the '.children'have a widthand HeightSet

注意：这假设'.children'有 awidth和HeightSet

Hope that Helps.

希望有帮助。

Answer 7

回答by Dave Robertson

If you know the number of elements per "row" and the width of the container you can use a selector to add a margin to the elements you need to cause a justified look.

如果您知道每“行”的元素数量和容器的宽度，您可以使用选择器为您需要的元素添加边距，以形成合理的外观。

I had rows of three divs I wanted justified so used the:

我有一排三个 div，我想证明是合理的，所以使用了：

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

this allows the center div in each row to have a margin that forces the 1st and 3rd div to the outside edges of the container

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

Also great for other things like borders background colors etc

也适用于边框背景颜色等其他内容

Html 具有等距 DIV 的流体宽度

提问by Lee Price

回答by thirtydot

回答by Ben Hymanson

回答by Danield

Case 1: Justifying boxes on a single line ( FIDDLE)

案例 1：单行对齐框 ( FIDDLE)

Case 2: Justifying boxes on multiple lines ( FIDDLE)

案例 2：多行对齐框 ( FIDDLE)

回答by Danield

CSS Grid Layout Module(Codepen demo)

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

Codepen demo(Resize to see the effect)

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

Browser Support - Caniuse

浏览器支持 - Caniuse

NB:

注意：

回答by Sebastián Brun Valiente

回答by ErickBest

回答by Dave Robertson

相关推荐

最近更新

标签

Html 具有等距 DIV 的流体宽度

提问by Lee Price

回答by thirtydot

回答by Ben Hymanson

回答by Danield

Case 1: Justifying boxes on a single line ( FIDDLE)

案例 1：单行对齐框 ( FIDDLE)

Case 2: Justifying boxes on multiple lines ( FIDDLE)

案例 2：多行对齐框 ( FIDDLE)

回答by Danield

CSS Grid Layout Module(Codepen demo)

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

Codepen demo(Resize to see the effect)

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

Browser Support - Caniuse

浏览器支持 - Caniuse

NB:

注意：

回答by Sebastián Brun Valiente

回答by ErickBest

回答by Dave Robertson

相关推荐

Html HTML5 - 我可以在 IMG 中使用宽度和高度吗？

Html 如何仅使用 CSS 将 Div 修复到页面顶部

Html 表单中的背景颜色

Html 将两个或多个 Canvas 元素与某种混合相结合

相关推荐

最近更新

标签