浮动div左边，使所有divs高度相等的行中最高的div？ [英] Floating divs left, make all divs height equal the tallest div in it's row?

问题描述

我正在尝试一个设计，将一系列的div，所有相同的类，在左边。我想要divs适合行，其中在每行div是相同的高度，所以行和设计元素之间没有破损排队。有没有办法使这种情况发生，或者我本质上必须预设每个div的高度？

我向左侧移动，因为如果浏览器宽度为skinnier，我希望行更短。

<我认为这很混乱。附上是我想要做的图像。

解决方案

我看到有三个选项：

在div样式中声明高度

看起来是最简单的答案，因为所有的div（在图片中）看起来都是完全相同的高度，这对我来说似乎没有问题：

  div.class {
 height：300px; 
} 
  

创建行容器

为每一行div创建一个容器并定义其高度，然后为每个子div提供100％的高度：

  div.row-container {height：300px; } 
 div.class {height：100％; } 
  

使用表格

<不要使用表元素以表格方式显示数据。我不知道你的div在语义上可以用表行和列替换多好。

---

编辑：我最初误解了，认为你想完全模仿图片。我的解决方案是假设一个恒定的高度（你表达的愿望，可能避免的东西）。反对这种立场的反驳是，在视觉上，所有相同高度的行是令人愉快的，最终你想要一个控制如何高度你的列可以。

但可以完全按照您的要求使用JS：

http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm

I am attempting a design that would float a series of divs, all the same class, to the left. I want the divs to fit into rows, where in each row the divs are the same height so that there is no breakage between the rows and the design elements line up. Is there a way to make this happen, or do I essentially have to preset each div's height?

I'm floating to the left because I want the rows to be shorter if the browsers width is skinnier.

I think that's confusing. Attached is an image of what I'm trying to do.

解决方案

There are three options as I see it:

State the height in your div style

Looks like the simplest answer, and since all divs (in the image) look to be the exact same height, this doesn't appear to be a problem to me:

div.class {
    height: 300px;
}

Create row containers

Create a container for each row of divs and define its height, then give each child div a height of 100%:

div.row-container { height: 300px; }
div.class         { height: 100%; }

Use a table

Don't be afraid to use the table element to display data in a tabular fashion. I am not sure how well your div semantically could be replaced with table rows and columns. But give it some thought as a potential candidate.

---

EDIT: I originally misunderstood, thinking you wanted to emulate the image exactly. My solutions are ones which assume a constant height (something you expressed a desire to possibly avoid). A counter-argument to that stance is that visually, rows which are all the same height are pleasing to the eye, and ultimately you want some control over how heigh your columns can be.

However it is possible to do exactly what you want, using no JS:

http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm

这篇关于浮动div左边，使所有divs高度相等的行中最高的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！