主站经典论坛家园作品品网维基桌面招聘

经典论坛 » 前台制作与脚本专栏 » 奇怪的问题，栏目名变成中文字后，下面的排版第五个位置会掉下来

‹‹ 上一主题 | 下一主题 ››

打印

奇怪的问题，栏目名变成中文字后，下面的排版第五个位置会掉下来

sundoo [楼主]

初级会员

帖子: 72
体力: 161
威望: 0
当前: 广东深圳
离线: 1 天

专长 网页设计,前端制作

1^# 大中小发表于 2009-8-19 16:40

<style type="text/css">
body { font-size: 12px; color: #303030; }
img { border: 0; }
ul { list-style: none; }
.all { width: 980px; margin: 0 auto; }
.height10 { height: 10px; font-size: 0; }
.height5 { height: 5px; font-size: 0; }
.clear { clear: both; }
a { text-decoration: none; color: #353535; }
a:hover { color: #D60000; text-decoration: underline; }
.teijia { margin-top: 7px; }
.teijia_top { width: 785px; height: 34px; background: url(/business/images/teijia_bg.gif) repeat-x; }
.teijia_toptitle { float: left; width: 500px; }
.teijia_titleft { float: left; width: 41px; height: 34px; background: url(/business/images/teijia_titleft.gif) no-repeat; }
.teijia_text { float: left; width: 150px; height: 26px; font-weight: bold; font-size: 15px; color: #FFF; padding: 8px 10px 0 10px;  }
.teijia_titleright { float: left; width: 46px; }
.teijia_topright { float: right; width: 5px; }
.teijia_body { width: 783px; border: 1px solid #D6D6D6; border-top: none; padding-bottom: 15px; }
.title { float: left; width: 100px; background: url(/business/images/teijiatext_bg.gif) repeat-x; height: 26px; font-size: 15px; color: #F00; font-weight: bold; text-align: center; padding-top: 8px; }
.yuanprice { text-decoration: line-through; }
.nowprice { color: #D50000; font-size: 12px; }
.nowprice span { font-weight: bold; font-family: arial; font-size: 14px; }
.content_title { font-size:12px; }
.tuilist { overflow: hidden; padding: 20px 0 0 10px; width: 773px; }
.tuilist dl { float: left; margin: 0 18px; *margin: 0 20px 10px 20px; _margin: 0 13px; width: 150px; border: 1px solid #CCC; }
.tuilist dt { margin-bottom: 5px; }
.tuilist dd { text-align: center; margin: 3px 0; }
</style>
<div class="teijia">
  <div class="teijia_top">
    <div class="teijia_toptitle">
      <div class="teijia_titleft"></div>
      <div class="title">特价</div>
      <div class="teijia_titleright"><img src="/business/images/teijia_titleright.gif" width="46" height="34" /></div>
    </div>
    <div class="teijia_topright"><img src="/business/images/teijia_right.gif" /></div>
  </div>
  <div class="teijia_body">
    <div class="tuilist">
      <dl>
        <dt><a href="#"><img src="images/spic_79.gif" width="150" height="205" /></a></dt>
        <dd class="content_title"><a href="#" title="爽朗开领短袖T恤">爽朗开领短袖T恤</a></dd>
        <dd class="nowprice">现 价: <span>￥120</span></dd>
        <dd class="yuanprice"><span>市场价:</span> ￥258</dd>
        <dd><img src="/business/images/buynow.gif" width="70" height="20" /></dd>
      </dl>
      <dl>
        <dt><a href="#"><img src="images/spic_81.gif" alt="商品图片" width="150" height="205" /></a></dt>
        <dd class="content_title"><a href="#" title="爽朗开领短袖T恤">爽朗开领短袖T恤</a></dd>
        <dd class="nowprice">现 价: <span>￥250</span></dd>
        <dd class="yuanprice"><span>市场价:</span> ￥388</dd>
        <dd><img src="/business/images/buynow.gif" width="70" height="20" /></dd>
      </dl>
      <dl>
        <dt><a href="#"><img src="images/spic_83.gif" alt="商品图片" width="150" height="205" /></a></dt>
        <dd class="content_title"><a href="#" title="爽朗开领短袖T恤">爽朗开领短袖T恤</a></dd>
        <dd class="nowprice">现 价: <span>￥160</span></dd>
        <dd class="yuanprice"><span>市场价:</span> ￥258</dd>
        <dd><img src="/business/images/buynow.gif" width="70" height="20" /></dd>
      </dl>
      <dl>
        <dt><a href="#"><img src="images/spic_85.gif" alt="商品图片" width="150" height="205" /></a></dt>
        <dd class="content_title"><a href="#" title="爽朗开领短袖T恤">爽朗开领短袖T恤</a></dd>
        <dd class="nowprice">现 价: <span>￥80</span></dd>
        <dd class="yuanprice"><span>市场价:</span> ￥258</dd>
        <dd><img src="/business/images/buynow.gif" width="70" height="20" /></dd>
      </dl>
      <dl>
        <dt><a href="#"><img src="images/spic_79.gif" width="150" height="205" /></a></dt>
        <dd class="content_title"><a href="#" title="爽朗开领短袖T恤">爽朗开领短袖T恤</a></dd>
        <dd class="nowprice">现 价: <span>￥120</span></dd>
        <dd class="yuanprice"><span>市场价:</span> ￥258</dd>
        <dd><img src="/business/images/buynow.gif" width="70" height="20" /></dd>
      </dl>
      <dl>
        <dt><a href="#"><img src="images/spic_81.gif" alt="商品图片" width="150" height="205" /></a></dt>
        <dd class="content_title"><a href="#" title="爽朗开领短袖T恤">爽朗开领短袖T恤</a></dd>
        <dd class="nowprice">现 价: <span>￥250</span></dd>
        <dd class="yuanprice"><span>市场价:</span> ￥388</dd>
        <dd><img src="/business/images/buynow.gif" width="70" height="20" /></dd>
      </dl>
      <dl>
        <dt><a href="#"><img src="images/spic_83.gif" alt="商品图片" width="150" height="205" /></a></dt>
        <dd class="content_title"><a href="#" title="爽朗开领短袖T恤">爽朗开领短袖T恤</a></dd>
        <dd class="nowprice">现 价: <span>￥160</span></dd>
        <dd class="yuanprice"><span>市场价:</span> ￥258</dd>
        <dd><img src="/business/images/buynow.gif" width="70" height="20" /></dd>
      </dl>
      <dl>
        <dt><a href="#"><img src="images/spic_85.gif" alt="商品图片" width="150" height="205" /></a></dt>
        <dd class="content_title"><a href="#" title="爽朗开领短袖T恤">爽朗开领短袖T恤</a></dd>
        <dd class="nowprice">现 价: <span>￥80</span></dd>
        <dd class="yuanprice"><span>市场价:</span> ￥258</dd>
        <dd><img src="/business/images/buynow.gif" width="70" height="20" /></dd>
      </dl>
    </div>
  </div>
</div>

提示：您可以先修改部分代码再运行

我把“特价”去掉或改成字母，下面的排版就不会乱了，搞不明白

[ 本帖最后由 sundoo 于 2009-8-19 16:42 编辑 ]

TOP

西部数码VPS主机1G内存仅266元 | 亚运会中国体育代表团领奖装备设计大赛

wmaster

初级会员

认证
帖子: 71
体力: 135
威望: 0
当前: 北京崇文区
离线: 1 天

2^# 大中小发表于 2009-8-19 16:50

给DL设高~~~~~~~~~

TOP

星辉互联买空间送加速器和域名! | 站长交易尽在admin5

sundoo [楼主]

初级会员

帖子: 72
体力: 161
威望: 0
当前: 广东深圳
离线: 1 天

专长 网页设计,前端制作

3^# 大中小发表于 2009-8-19 17:07

OK了，呵呵，这么简单就解决了，害我折腾了半天，就是不知道为什么要这样做

TOP

认证您的手机，获得手机认证图标手机认证的好处

menglei

新手上路

帖子: 10
体力: 27
威望: 0
当前: 北京海淀区

4^# 大中小发表于 2009-8-19 17:14

解决了？

我看了下，把第一个块的下边那小图高度调小一点就可以了，第一个块高度高了

<style type="text/css">
body { font-size: 12px; color: #303030; }
img { border: 0; }
ul { list-style: none; }
.all { width: 980px; margin: 0 auto; }
.height10 { height: 10px; font-size: 0; }
.height5 { height: 5px; font-size: 0; }
.clear { clear: both; }
a { text-decoration: none; color: #353535; }
a:hover { color: #D60000; text-decoration: underline; }
.teijia { margin-top: 7px; display:inline; float:left; }
.teijia_top { width:785px; float:left; background: url(/business/images/teijia_bg.gif) repeat-x; }
.teijia_toptitle { float: left; width:500px; }
.teijia_titleft { float: left; width:41px; background: url(/business/images/teijia_titleft.gif) no-repeat; }
.teijia_text { float: left; width: 150px; height: 26px; font-weight: bold; font-size: 15px; color: #FFF; padding: 8px 10px 0 10px;  }
.teijia_titleright { float:left; width: 46px; }
.teijia_topright { float:right; width:280px; }
.teijia_body { width: 783px; float:left; border: 1px solid #D6D6D6; border-top:0; padding-bottom: 15px; }
.title { float: left; width: 120px; background: url(/business/images/teijiatext_bg.gif) repeat-x; height:34px; line-height:34px; font-size:14px; color: #F00; font-weight: bold; text-align: center; }
.yuanprice { text-decoration: line-through; }
.nowprice { color: #D50000; font-size: 12px; }
.nowprice span { font-weight: bold; font-family: arial; font-size: 14px; }
.content_title { font-size:12px; }
.tuilist { overflow: hidden; padding: 20px 0 0 10px; width: 773px; }
.tuilist dl { float: left; margin:0 18px; width:150px; border: 1px solid #CCC; display:inline; }
.tuilist dl dt { float:left; padding-bottom: 5px; text-align:center; width:150px; }
.tuilist dl dd { text-align:center; float:left; margin:3px 0 0; width:150px; }
</style>
<div class="teijia">
  <div class="teijia_top">
    
    <div class="teijia_toptitle">
      <div class="teijia_titleft"></div>
      <div class="title">特价</div>
      <div class="teijia_titleright"><img src="/business/images/teijia_titleright.gif" width="46" height="34" /></div>
    </div>
    <div class="teijia_topright"><img src="/business/images/teijia_right.gif" /></div>
    
  </div>
  
  
  <div class="teijia_body">
    <div class="tuilist">
      <dl>
        <dt><a href="#"><img src="images/spic_85.gif" alt="商品图片" width="150" height="205" /></a></dt>
        <dd class="content_title"><a href="#" title="爽朗开领短袖T恤">爽朗开领短袖T恤</a></dd>
        <dd class="nowprice">现 价: <span>￥80</span></dd>
        <dd class="yuanprice"><span>市场价:</span> ￥258</dd>
        <dd><img src="/business/images/buynow.gif" width="70" height="18" /></dd>
      </dl>
      <dl>
        <dt><a href="#"><img src="images/spic_81.gif" alt="商品图片" width="150" height="205" /></a></dt>
        <dd class="content_title"><a href="#" title="爽朗开领短袖T恤">爽朗开领短袖T恤</a></dd>
        <dd class="nowprice">现 价: <span>￥250</span></dd>
        <dd class="yuanprice"><span>市场价:</span> ￥388</dd>
        <dd><img src="/business/images/buynow.gif" width="70" height="20" /></dd>
      </dl>
      <dl>
        <dt><a href="#"><img src="images/spic_83.gif" alt="商品图片" width="150" height="205" /></a></dt>
        <dd class="content_title"><a href="#" title="爽朗开领短袖T恤">爽朗开领短袖T恤</a></dd>
        <dd class="nowprice">现 价: <span>￥160</span></dd>
        <dd class="yuanprice"><span>市场价:</span> ￥258</dd>
        <dd><img src="/business/images/buynow.gif" width="70" height="20" /></dd>
      </dl>
      <dl>
        <dt><a href="#"><img src="images/spic_85.gif" alt="商品图片" width="150" height="205" /></a></dt>
        <dd class="content_title"><a href="#" title="爽朗开领短袖T恤">爽朗开领短袖T恤</a></dd>
        <dd class="nowprice">现 价: <span>￥80</span></dd>
        <dd class="yuanprice"><span>市场价:</span> ￥258</dd>
        <dd><img src="/business/images/buynow.gif" width="70" height="20" /></dd>
      </dl>
      
      <dl>
        <dt><a href="#"><img src="images/spic_85.gif" alt="商品图片" width="150" height="205" /></a></dt>
        <dd class="content_title"><a href="#" title="爽朗开领短袖T恤">爽朗开领短袖T恤</a></dd>
        <dd class="nowprice">现 价: <span>￥80</span></dd>
        <dd class="yuanprice"><span>市场价:</span> ￥258</dd>
        <dd><img src="/business/images/buynow.gif" width="70" height="20" /></dd>
      </dl>
    </div>
  </div>
</div>

提示：您可以先修改部分代码再运行

[ 本帖最后由 menglei 于 2009-8-19 17:15 编辑 ]

TOP

sundoo [楼主]

初级会员

帖子: 72
体力: 161
威望: 0
当前: 广东深圳
离线: 1 天

专长 网页设计,前端制作

5^# 大中小发表于 2009-8-19 17:32

十分感谢楼上，但我这边些都是150x205的，图片大小是一样的

TOP

sundoo [楼主]

初级会员

帖子: 72
体力: 161
威望: 0
当前: 广东深圳
离线: 1 天

专长 网页设计,前端制作

6^# 大中小发表于 2009-8-19 17:40

你是说立即购买那个按钮这个图片啊，高度改小，也解决了问题。不过这个是从程序读取，最后全部高度是一样的，下面还是会掉下来。

[ 本帖最后由 sundoo 于 2009-8-19 17:42 编辑 ]

TOP

‹‹ 上一主题 | 下一主题 ››