在 HTML/CSS 中实现列

发布于 2024-07-19 09:44:13 字数 1169 浏览 5 评论 0原文

我有一堆包含文本信息的 DIV。它们的宽度都相同（也许 400px 左右），但高度不同。出于空间原因，我希望有两列或三列这些 DIV（有点像报纸上的招聘广告部分）。请参阅下面有吸引力的 ascii-art :)

DIV1      DIV3
DIV1      DIV3
DIV1    
DIV1      DIV4
DIV1      DIV4
DIV1      DIV4
          DIV4   
DIV2      DIV4
DIV2

DIV 是 javascript 驱动的，并在页面加载时更改高度。我也不应该更改它们的顺序（每个 DIV 都有一个标题，并且它们按字母顺序排序）。

到目前为止我还没有找到好的方法。 HTML 流程是从左到右，然后从上到下，但我需要从上到下，然后从左到右。

我尝试了一个具有两列的表的简单实现，并将 DIV 放在一列中，另一半放在另一列中。有时它看起来很合理（当每列中 DIV 的平均高度非常接近时），但另一半看起来很糟糕。

我想如果我是一名 javascript 大师，我可以在 DIV 扩展后对其进行测量，将它们总计，然后在运行时将它们从一个表列移动到另一个表列...但这超出了我的能力，而且我不确定无论如何这是可能的。

有什么建议么？

谢谢

更新：

感谢您的评论。很明显，我问这个问题做得很差:(

DIV 只是包含/分组相似内容的一种方式 - 本身并没有真正将它们用于布局。它们的宽度都相同，但高度不同。我想要将它们吐到一页上，然后神奇地:)将它们排列成两列，两列的高度几乎相同 - 就像报纸专栏一样。当我开始时，我不知道 DIV 有多高，所以我不知道将每个 DIV 放在哪一列中（这意味着如果我知道它们的高度，我会将它们分成两个表格单元格，但我不知道）我不知道）。所以上面的例子只是一个简单的例子——在运行时可能会发现 DIV 1 比其他 3 个组合大（在这种情况下 DIV2 应该浮动到列 2 的顶部），或者 DIV 4 可能是大的（在这种情况下，DIV 1、2 和 3 将全部位于第 1 列中，而 DIV4 可能单独位于第 2 列中）

基本上，我希望有一种方法可以创建两列并神奇地拥有内容 > 根据需要从第 1 列流到第 2 列（就像 Word 那样）。我怀疑这是不可能完成的，但我的 HTML/CSS 知识非常基础，所以也许......？

原文

I have a bunch of DIVs that contain textual information. They're all the same width (maybe 400px or so), but different heights. For space reasons, I'd like to have two or three columns of these DIVs (sort of like a want-ad section in a newspaper). See attractive ascii-art below :)

DIV1      DIV3
DIV1      DIV3
DIV1    
DIV1      DIV4
DIV1      DIV4
DIV1      DIV4
          DIV4   
DIV2      DIV4
DIV2

The DIVs are javascript-driven and change height at page-load time. I also shouldn't change their order (each DIV has a title, and they're sorted alphabetically).

So far I haven't found a good way to do it. HTML flow is left to right, then top to bottom, but I need top to bottom, then left to right.

I tried a naive implementation of a table with two columns, and have the DIVs in one column, and the other half in the other column. Have the time it looks reasonable (when the average height of the DIVs in each column comes out close), the other half it looks horrible.

I suppose if I was a javascript guru I could measure the DIVs after they've expanded, total them up, then move them from one table column to another at run time... but that's beyond my abilities, and I'm not sure it's possible anyway.

Any suggestions?

Thanks

UPDATE:

Thanks for the comments. It's obvious I did a poor job of asking the question :(

The DIVs are just a way of containing/grouping similar content -- not really using them for layout per se. They're all the same width, but different heights. I want to just spit them out on a page, and magically :) have them arranged into two columns, where the height of the two columns is pretty much the same -- like newspaper columns. I don't know how high the DIVs are when I start, so I don't know which column to place each DIV in (meaning that if I knew their heights, I'd split them among two table cells, but I don't know). So the example above is just a simple example -- it might turn out at run time that DIV 1 is larger than the other 3 combined (in which case DIV2 should float to the top of column2), or maybe DIV 4 turns out to be the big one (in which case DIVs 1, 2 and 3 would all be in column1, and DIV4 could be alone in column2)

Basically I was hoping there was a way to create two columns and have the content magically flow from column1 to column2 as needed (like Word does). I suspect this can't be done, but my HTML/CSS knowledge is pretty basic so maybe...?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

-残月青衣踏尘吟 2024-07-26 09:44:13

草案 CSS3 多列模型可以满足您的需求。 Firefox 似乎支持-moz 版本的某些属性和 Safari/Chrome -webkit 版本；我不知道IE8或Opera。

回复收藏 0 原文

记忆里有你的影子 2024-07-26 09:44:13

您可以将 div1 和 div2 包装在包装 div 中，将 div 3 和 div 4 包装在包装 div 中，然后将这两个包装在外部包装中。使用一些 css 来获得正确的格式，你应该可以开始了。 html 可能看起来像这样：

<div class="wrap">
  <div class="col">
     <div>div1</div>
     <div>div2</div>
  </div>
  <div class="col">
     <div>div3</div>
     <div>div4</div>
  </div>
</div>

然后，有一些像这样的 css：

.wrap {
  position: relative;
  overflow: auto;
}
.col {
  float: left;
  width: 400px;
}

这应该做正确的事情。

You could wrap div1 and div2 in a wrapper div, and div 3 and div 4 in a wrapper div, then wrap those two in an outer wrapper. Use some css to the get formatting right and you should be good to go. The html might look something like this:

<div class="wrap">
  <div class="col">
     <div>div1</div>
     <div>div2</div>
  </div>
  <div class="col">
     <div>div3</div>
     <div>div4</div>
  </div>
</div>

Then, have some css like this:

.wrap {
  position: relative;
  overflow: auto;
}
.col {
  float: left;
  width: 400px;
}

That should do the right thing.

回复收藏 0 原文

我是有多爱你 2024-07-26 09:44:13

使用浮动，如下所示：

<style>
.col1{
 width: 400px;
 height: 100px;
 float: left;
}
.col2{
 width: 400px;
 height: 150px;
 float: left;
}
.col3{
 width: 400px;
 height: 200px;
 float: left;
}
</style>
<div style="width: 1200px;">
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
</div>

Use float, like so:

<style>
.col1{
 width: 400px;
 height: 100px;
 float: left;
}
.col2{
 width: 400px;
 height: 150px;
 float: left;
}
.col3{
 width: 400px;
 height: 200px;
 float: left;
}
</style>
<div style="width: 1200px;">
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
</div>

回复收藏 0 原文