标题:请教,如何让左侧的列能自动和右侧一样高?
只看楼主
nicechlk
Rank: 3Rank: 3
等 级:论坛游侠
威 望:4
帖 子:330
专家分:187
注 册:2008-9-6
结帖率:66.67%
 问题点数:0 回复次数:13 
请教,如何让左侧的列能自动和右侧一样高?
1、也就是说,我左侧的列内容少,右侧的多。因为要加边框线,会导致左右不等高。请教有什么办法吗?
2、另外,如果我有一图片做背景(图片的高度有限),在第一个问题解决的情况下(左右等高时),如何让图片一直在列的底部?补充:不能用vlign=bottom,否则文字也到底部了。
谢谢!
搜索更多相关主题的帖子: 自动 
2008-10-28 12:46
kai
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:52
帖 子:3450
专家分:59
注 册:2004-4-25
得分:0 
程序代码:
<div id="img_text_style" style="width:600px">
  <div id="left" style="float:left; width:300; height:500; border:1px dashed silver;">
    <h3 style="color:red; padding-left:1em;">左侧标题</h3>
    具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具

体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字

内容
    <div id="my_image" style="position:absolute; margin-top:16em; margin-left:12em;">
      <img src="123-2.jpg" width="100" height="60" alt="" />
    </div>
  </div>
  <div id="right" style="height:500; border:1px dashed silver;">
    <h3 style="color:red; padding-left:1em;">右侧标题</h3>
  具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体

文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内

容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体

文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内

容具体文字内容具体文字内容。。。。。。
  </div>
</div>

自由,民主,平等,博爱,进步.
中华民国,我的祖国,中华民国万岁!中华民国加油!
本人自愿加入中国国民党,为人的自由性,独立性和平等性而奋斗!
2008-10-28 14:35
nicechlk
Rank: 3Rank: 3
等 级:论坛游侠
威 望:4
帖 子:330
专家分:187
注 册:2008-9-6
得分:0 
你好,kai,你的代码我试验了一下,当右侧文字增加时,左侧的表格高度不增加,这样左右表格的下方不在一条水平线上。该如何处理呢?我想让2列在同一水平线上,而无论其中一列的高度如何变化,谢谢!

莫以善小而不为,莫以恶小而为之!
2008-10-28 22:49
kai
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:52
帖 子:3450
专家分:59
注 册:2004-4-25
得分:0 
我理解你的意思了, 你所指的是针对动态网页而言的, 是不是?

针对动态网页而言, 我想不出div + css 的解决办法. 因为对于动态页面来说, 某一栏的高度是无法事先知道的.

解决的办法是用table 来做.

自由,民主,平等,博爱,进步.
中华民国,我的祖国,中华民国万岁!中华民国加油!
本人自愿加入中国国民党,为人的自由性,独立性和平等性而奋斗!
2008-10-29 12:28
kai
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:52
帖 子:3450
专家分:59
注 册:2004-4-25
得分:0 
我这边用的是ie7 和 firefox. 在ie7下面可以, 但是在firefox里面不行.
如果我要做的话就用table做了, 在不得已的情况下只能用table 来做.
程序代码:
<div id="img_text_style" style="width:600px; height:auto; border:1px dashed silver;">
  
  <div id="right" style="float:right; margin-top:0; width:250px; height:auto; min-height:500px; border-left:1px dashed silver;">
    <h3 style="color:red; padding-left:1em;">右侧标题</h3>
    <p>具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容。。。。。。</p>

    <p>具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容。。。。。。</p>
    
    <p>具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容。。。。。。</p>
  </div>
  <div id="left" style="width:300px; ">
    <h3 style="color:red; padding-left:1em;">左侧标题</h3>
    <p>具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容</p>

    <div id="my_image" style="margin-left:6em; margin-top:10em;">
      <img src="123-2.jpg" width="100" height="60" alt="" />
    </div>
  </div>
  
</div>

自由,民主,平等,博爱,进步.
中华民国,我的祖国,中华民国万岁!中华民国加油!
本人自愿加入中国国民党,为人的自由性,独立性和平等性而奋斗!
2008-10-29 13:37
nicechlk
Rank: 3Rank: 3
等 级:论坛游侠
威 望:4
帖 子:330
专家分:187
注 册:2008-9-6
得分:0 
谢谢你kai,正如你所说,页面是动态的。因为我在<table></table>里加了边框线,所以想实现这样的目的。不过,如何用<table>来实现呢?
另外,<td height="100%">这样是没有效果的,width=100%都有效果,这是为什么呢?

莫以善小而不为,莫以恶小而为之!
2008-10-31 00:03
kai
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:52
帖 子:3450
专家分:59
注 册:2004-4-25
得分:0 
如果底端的图片不是很大的话,那么可以将另外一边的td 用空格处理,代码如下:
程序代码:
  <div id="tableTest" style="width:600px; height:auto; border:1px dashed silver;">
  <table cellpadding="3px" cellspacing="9px" border="1">
    <tr>
      <td width=50% valign="top">
        <h3 style="color:red;">左侧标题</h3>
        <p>具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容。。。</p>
        
      </td>
      <td width=50%>
        <h3 style="color:red;">右侧标题</h3>
        <p>具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容。。。</p>
        <p>具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容。。。</p>
        <p>具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容。。。</p>
      </td>
    </tr>
    <tr>
      <td align="right"><img src="123.jpg" width="80" height="60" alt="" /></td>
      <td>&nbsp;</td>
    <tr>
  </table>
</div>

自由,民主,平等,博爱,进步.
中华民国,我的祖国,中华民国万岁!中华民国加油!
本人自愿加入中国国民党,为人的自由性,独立性和平等性而奋斗!
2008-10-31 11:04
kai
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:52
帖 子:3450
专家分:59
注 册:2004-4-25
得分:0 
还有一个动态的方法, 你可以将每个box 的宽度, 高度都设置为一样. 然后通过两个for 来实现.

我想你的数据会放在数据库中, 我假定你的left 是电器类产品, 你的right 是化工类产品. 每个box 里面放的是某个产品的介绍, 并且box 的 width 和 height 都是事先固定的. 比如width:200px; height:120px; 在你动态写网页之前, 你可以确定 left 有几个box 要放, 你可以确定 right 有几个 box 要放. 假定左侧需要放2个box, 右侧需要放7个box, 那么就是说左侧最上面的两个box 是有内容的, 其后放4个空box, 最后一个放图片, 这样底线就在同一个高度了.

自由,民主,平等,博爱,进步.
中华民国,我的祖国,中华民国万岁!中华民国加油!
本人自愿加入中国国民党,为人的自由性,独立性和平等性而奋斗!
2008-10-31 11:16
nicechlk
Rank: 3Rank: 3
等 级:论坛游侠
威 望:4
帖 子:330
专家分:187
注 册:2008-9-6
得分:0 
谢谢你的指点,kai!
事实上,我的2个box都不知道会是几个?
因为box是从后台数据库里读取的,不能确定管理员要添加几个box。这该怎么办呢?
表格有没有自动高度的参数呢?

莫以善小而不为,莫以恶小而为之!
2008-11-04 01:33
kai
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:52
帖 子:3450
专家分:59
注 册:2004-4-25
得分:0 
nicechlk,
box 涉及的是排版布局的问题, 也就是说和数据库是没有关系的.
box 里面放的内容来源于数据库.
用css 排版布局正是为了内容与布局分离.

一个div 就是一个box, 其间放的是内容. 不知道你有没有理解我的意思? 如果你实在有困难, 画一个排版草图, 我用div + css 帮你布局一下。

自由,民主,平等,博爱,进步.
中华民国,我的祖国,中华民国万岁!中华民国加油!
本人自愿加入中国国民党,为人的自由性,独立性和平等性而奋斗!
2008-11-04 14:10



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-241053-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.110530 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved