固定宽,不固定列的等高问题

flyforlove 2013-01-28 10:36:00
要求纯css解决,不用js,不考虑ie7以及以下浏览器的兼容。

显示要求如下:
1.每一列宽度固定。
2.列数不固定,根据浏览器的宽度自动调整。
3.等高,要求画出等高的边框以及背景色。

已经考虑过的方法:
1.float,无法自动等高,换行产生咬合现象。
2.inline-block,解决1的咬合现象,但是无法画出等高的边框以及背景色,并且产生万恶的空格间距。
3.table-cell,可以画出等高的边框以及背景色,但列数固定,无法根据浏览器宽度调整列数。

望css高手解答,谢谢。
...全文
282 21 打赏 收藏 转发到动态 举报
写回复
用AI写文章
21 条回复
切换为时间正序
请发表友善的回复…
发表回复
86y 2013-02-02
  • 打赏
  • 举报
回复
CSS如果是单行应该是可以的。。如果多行是行不通的。。。
  • 打赏
  • 举报
回复
引用 18 楼 flyforlove 的回复:
谢谢你的隐藏大法,这个应该是现在用的比较多的多栏等高实现方法。 不过有个致命的问题,就以你的例子来看,当浏览器缩小到只能显示3列时,最底行的最右边缺失的一块无法隐藏第六列向下伸出的部分。 这几天也在琢磨这事,好像只用css是无解的样子。 引用 17 楼 stongyann 的回复:为什么一定要用 css 。也不是没有解决的办法 ,但是 会因此带来 其他的问题……
这也是我 为什么 不建议光用 css 去写的原因。因为 这个没有办法 完整的去表达你想要的太复杂的效果,css 只是去表现 而不能去判断。
Kilin_Zhang 2013-01-31
  • 打赏
  • 举报
回复
上js吧,css搞不定的
flyforlove 2013-01-30
  • 打赏
  • 举报
回复
谢谢你的隐藏大法,这个应该是现在用的比较多的多栏等高实现方法。 不过有个致命的问题,就以你的例子来看,当浏览器缩小到只能显示3列时,最底行的最右边缺失的一块无法隐藏第六列向下伸出的部分。 这几天也在琢磨这事,好像只用css是无解的样子。
引用 17 楼 stongyann 的回复:
为什么一定要用 css 。也不是没有解决的办法 ,但是 会因此带来 其他的问题。如果你只是针对你现在提出的问题求解决办法那我贴一个 例子给你你自己试试。借用楼上的代码啊 呵呵。 XML/HTML code?123456789*{margin0;padding:0;}.box { margin-bottom:-10000px; padding-bottom:10000px……
  • 打赏
  • 举报
回复
为什么一定要用 css 。也不是没有解决的办法 ,但是 会因此带来 其他的问题。如果你只是针对你现在提出的问题求解决办法那我贴一个 例子给你你自己试试。借用楼上的代码啊 呵呵。

*{margin0;padding:0;}
.box { margin-bottom:-10000px; padding-bottom:10000px;float:left; width:300px;display: inline-block; margin-right:15px;}
.wrapper{ width:100%;overflow:hidden;}
.bgcolor1{ background:#999}
.bgcolor2{ background:#888}
.bgcolor3{ background:#777}
.bgcolor4{ background:#666}
.bgcolor5{ background:#555}
.bgcolor6{ background:#444}


<div class="wrapper">
<div class="box bgcolor1">
<h1>第一列</h1>
<p>内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</p>
</div>
<div class="box bgcolor2">
<h1>第二列</h1>
<p>内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2</p>
</div>
<div class="box bgcolor3">
<h1>第三列</h1>
<p>内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3</p>
</div>
<div class="box bgcolor4">
<h1>第四列</h1>
<p>内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4</p>
</div>
<div class="box bgcolor5">
<h1>第五列</h1>
<p>内容5</p>
</div>
<div class="box bgcolor1">
<h1>第六列</h1>
<p>内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6</p>
</div>
<div class="box bgcolor2">
<h1>第七列</h1>
<p>内容.</p>
</div>
<div class="box bgcolor3">
<h1>第八列</h1>
<p>内容.</p>
</div>
</div>

这么做其实只是欺骗了你的视觉。所以有很多致命的问题。最后我还是建议楼主 用JS 去写吧比这样要轻松不少的。至于会有什么问题。你可以 私信给我 我告诉你呵呵。
同时附上 以上代码 运行后的效果图一张:
flyforlove 2013-01-30
  • 打赏
  • 举报
回复
any idea?
flyforlove 2013-01-28
  • 打赏
  • 举报
回复
引用 1 楼 fzfei2 的回复:
用table ,百分比宽度
就不能看清楚问题再回答么?都说了宽度固定,根据浏览器宽度自动调整列数了。
fzfei2 2013-01-28
  • 打赏
  • 举报
回复
用table ,百分比宽度
flyforlove 2013-01-28
  • 打赏
  • 举报
回复
嗯,应该没那么简单。 再想想吧,类似叠罗汉一样的歪门邪道也无妨。
引用 14 楼 shn11160 的回复:
我知道了,你是想让每一行中其它的列的高度等于高度在自适应情况下中最高列的高度。 同时要保证浏览器宽度改变后,宽度固定,列数自适应。 这的确很麻烦,我一时也想不出啥好办法。
云水千寻 2013-01-28
  • 打赏
  • 举报
回复
我知道了,你是想让每一行中其它的列的高度等于高度在自适应情况下中最高列的高度。 同时要保证浏览器宽度改变后,宽度固定,列数自适应。 这的确很麻烦,我一时也想不出啥好办法。
云水千寻 2013-01-28
  • 打赏
  • 举报
回复
引用 12 楼 flyforlove 的回复:
Thank you for your reply. 你的解决方案里固定了div的高度,不可以。
你可以把高度的CSS样式给去掉啊, 你认为去掉高度会有什么问题呢?
flyforlove 2013-01-28
  • 打赏
  • 举报
回复
Thank you for your reply. 你的解决方案里固定了div的高度,不可以。 我上面的回复里已经把效果图贴出来了,应该很容易理解。
引用 11 楼 shn11160 的回复:
我是采用inline-block,并且解决了产生万恶的空格间距, 宽度固定,列数可以根据浏览器宽度自适应, 兼容IE8+、Firefox和Chrome。 至于“但是无法画出等高的边框以及背景色”, 因为不太明白“等高的边框以及背景色”是神马意思, 所以无法解决,还请楼主赐教
云水千寻 2013-01-28
  • 打赏
  • 举报
回复
我是采用inline-block,并且解决了产生万恶的空格间距, 宽度固定,列数可以根据浏览器宽度自适应, 兼容IE8+、Firefox和Chrome。 至于“但是无法画出等高的边框以及背景色”, 因为不太明白“等高的边框以及背景色”是神马意思, 所以无法解决,还请楼主赐教
云水千寻 2013-01-28
  • 打赏
  • 举报
回复
借用 4 楼 xiaofan_sap 的代码做些修改, 楼主看看这个行不?(背景色你可以自己设置)

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
		.box
		{
			width: 200px; height: 200px;
			/*margin: 0;*/
			border: 1px solid black;
			display: inline-block;
			font-size: 14px;
			vertical-align: top;
		}
		.wrapper
		{
			font-size:0;
		}
                      
  </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="box">
        <h1>第一列</h1>
        <p>内容</p>
      </div>
      <div class="box">
        <h1>第二列</h1>
        <p>内容.</p>
      </div>
      <div class="box">
        <h1>第三列</h1>
        <p>内容.</p>
      </div>
      <div class="box">
        <h1>第四列</h1>
        <p>内容.</p>
      </div>
      <div class="box">
        <h1>第五列</h1>
        <p>内容.</p>
      </div>
      <div class="box">
        <h1>第六列</h1>
        <p>内容.</p>
      </div>
      <div class="box">
        <h1>第七列</h1>
        <p>内容.</p>
      </div>
      <div class="box">
        <h1>第八列</h1>
        <p>内容.</p>
      </div>
    </div>
  </body>
</html>

云水千寻 2013-01-28
  • 打赏
  • 举报
回复
请问“等高的边框以及背景色”是什么意思?能具体解释下吗?
flyforlove 2013-01-28
  • 打赏
  • 举报
回复
有朋友要让上图,就上个图,从上到下分别是缩小浏览器宽度的效果。每列宽度固定,内容的高度不定,每行的高度是本行最大内容的高度。

flyforlove 2013-01-28
  • 打赏
  • 举报
回复
你想以绝对位置用.bottom把.box撑到.wrapper的底部。你应该没测试过缩小浏览器换行吧。测一下所有乱象都出来了。
引用 4 楼 xiaofan_sap 的回复:
CSS code?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364<html><head> <title></title> <style type="text/css"> ……
熊猫大虾 2013-01-28
  • 打赏
  • 举报
回复
建议先画个图出来,
dongjunhui2010 2013-01-28
  • 打赏
  • 举报
回复
我竟然读不懂问题……
xiaofan_sap 2013-01-28
  • 打赏
  • 举报
回复


<html>
<head>
    <title></title>
    <style type="text/css">
        .box
        {
            width: 250px;
            margin-left: 20px;
            float: left;
            display: inline;
            padding: 20px;
        }
        .wrapper
        {
            overflow: hidden;
            width: 100%;
            position: relative;
        }
        .box
        {
            padding-bottom: 220px;
            margin-bottom: -200px;
            background: #89ac10;
        }
        .bottom
        {
            position: absolute;
            bottom: 0;
            height: 20px;
            width: 250px;
            background: #89ac10;
            margin-left: -20px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <h1>
                第一列</h1>
            <p>
                内容</p>
            <div class="bottom">
            </div>
        </div>
        <div class="box">
            <h1>
                第二列</h1>
            <p>
                内容.</p>
            <div class="bottom">
            </div>
        </div>
        <div class="box">
            <h1>
                第三列</h1>
            <p>
                内容.</p>
            <div class="bottom">
            </div>
        </div>
    </div>
</body>
</html>

加载更多回复(1)
css负边距原来有这么大的妙用。 今天看了一篇大大的博文: css的负边距(margin负值)的绝招负边距可以做的事有很多。 可以增大元素的度 可以实现多多行布局 左侧固定右侧自适应布局 等布局 圣杯布局 双飞翼布局 1.左侧固定,右侧自适应布局实现效果:左侧200px,右侧自适应,中间间隔10px。请用两种方法来实现。先不考虑兼容性

61,111

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧