请教，如何让左侧的列能自动和右侧一样高？ - 编程论坛

#2

kai2008-10-28 14:35

程序代码：

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

#3

nicechlk2008-10-28 22:49

你好，kai，你的代码我试验了一下，当右侧文字增加时，左侧的表格高度不增加，这样左右表格的下方不在一条水平线上。该如何处理呢？我想让2列在同一水平线上，而无论其中一列的高度如何变化，谢谢！

#4

kai2008-10-29 12:28

我理解你的意思了, 你所指的是针对动态网页而言的, 是不是?

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

解决的办法是用table 来做.

#5

kai2008-10-29 13:37

我这边用的是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>

#6

nicechlk2008-10-31 00:03

谢谢你kai，正如你所说，页面是动态的。因为我在<table></table>里加了边框线，所以想实现这样的目的。不过，如何用<table>来实现呢？
另外，<td height="100%">这样是没有效果的，width=100%都有效果，这是为什么呢？

#7

kai2008-10-31 11:04

如果底端的图片不是很大的话，那么可以将另外一边的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> </td>
    <tr>
  </table>
</div>

#8

kai2008-10-31 11:16

还有一个动态的方法, 你可以将每个box 的宽度, 高度都设置为一样. 然后通过两个for 来实现.

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

#9

nicechlk2008-11-04 01:33

谢谢你的指点，kai！
事实上，我的2个box都不知道会是几个？
因为box是从后台数据库里读取的，不能确定管理员要添加几个box。这该怎么办呢？
表格有没有自动高度的参数呢？

#10

kai2008-11-04 14:10

nicechlk,
box 涉及的是排版布局的问题, 也就是说和数据库是没有关系的.
box 里面放的内容来源于数据库.
用css 排版布局正是为了内容与布局分离.

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

#11

nicechlk2008-11-04 20:09

说明：像这个页面，左侧是个石头画，但是那个石头的顶端跑到上面去了。如果现在定好高度，那么当右侧的高度改变时，左侧高度又显得“矮了”。
左侧导航的行数是不固定的（用户可能会添加新的类别），右侧的高度也是不固定的（用户可能会修改简介从而改变字数的高度）。如何让“小石头”落到下面去呢？

[[it] 本帖最后由 nicechlk 于 2008-11-4 20:20 编辑 [/it]]

#12

kai2008-11-05 10:17

nicechlk,
我说说我的个人看法：在导航栏的底端加一张图片，这种设计实在是有点不伦不类，从设计上我个人觉得不妥。

从技术实现方面来讲，如果这张图的尺寸不是很大，(既然你放在导航栏的底端, 那么这张图的尺寸应该不会很大)，那么可以这么做：

<div class="vNavi_with_pic">
  <div class="pic_as_header">
    <img ......                     />
  </div>
  <ul class="v_navi">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    等等。。。
  </ul>
  <div class="pic_as_footer">
    <img src="stone.jpg" width="" height="" alt="" style="" />
  </div>
</div>

#13

nicechlk2008-11-05 11:26

看来我真的需要找找教程学习div了。谢谢你kai。

#14

nicechlk2010-04-03 16:49

嗯，我明白了，非常感谢！