CSS图文混排的几种方案

百度新闻首页的方案：


代码如下:

<table>
 <tbody>
 <tr>
 <td class="topic-pic"><a href=""><img src=""></a></td>
 <td class="topic-txt">…</td>
 </tr>
 </tbody>
</table>

html结构丑陋，但css简单。
新浪微博首页的方案：


代码如下:

<div class="twit_item MIB_linedot2">
<div class="twit_item_pic">
<a href="" target="_blank">
<img src="" ...>
</a>
</div>
<div class="twit_item_content">
....
</div>
</div>

CSS：


代码如下:

.twit_list dd .twit_item_pic{float:left;width:66px;padding-top:2px;} .twit_list dd .twit_item_content{float:left;width:316px;color:#666;line-height:18px;}

大部分应试者都是这个答案。用了浮动就必须定宽，结构就失去灵活性，同时必须解决浮动带来的一系列问题。
网易首页方案：


代码如下:

<ul>
 <li class="list-figure"><a href=""><img src=""></a></li>
 <li><a href="">…</a></li>
 <li><a href="">…</a></li>
 <li><a href="">…</a></li>
</ul>

CSS：


代码如下:

.list-figure { float: left; _display: inline; width: 130px; margin-left: -140px; margin-top: 6px; }

这些写法都是欠缺对css基本概念的理解。如果理解block formatting context(块级格式化上下文)的概念， 就不会这么写了。触发了BFC的块级元素，它的边缘不会和float box重叠。
推荐的方案：


代码如下:

<div class="item">
<div class="pic">...</div>
<div class="content">...</div>
</div>

CSS：


代码如下:

.item .pic { float:left;margin-right:10px; }
.item .content { overflow:hidden;zoom:1; } /* 或用display:table-cell */


我写的一个实例


代码如下:

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width">
        <style type="text/css">
          body {
              margin: 0;
              padding: 1em 0;
              background-color: #f3f3f3;
              font:16px/1.7 Arial, Helvetica, sans-serif;
              color:#5a5a5a
          }
          a {
            color: #08c;
            text-decoration: none
          }
          header h1{
                text-align:center
            }
          ul{margin: 0;padding: 0}
          ul li{list-style: none;margin: 0;font-size: 13px;}
          h3{line-height: 1.7;margin: 0}
          .item .pic { float:left;margin-right:10px; }
          .item .content { overflow:hidden;zoom:1; } /* 或用display:table-cell */
        </style>
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
    <header>左图右内容的效果实现 </header>
    <div class="item">
      <div class="pic">

</div>
      <div class="content">
        <h3><a href="">标题标题标题标题</a></h3>
        <ul>
          <li><a href="">内容内容内容内容1</a></li>
          <li><a href="">内容内容内容内容2</a></li>
          <li><a href="">内容内容内容内容3</a></li>
          <li><a href="">内容内容内容内容4</a></li>
        </ul>
      </div>
    </div>

</body>
</html>

总结
用的不是技术，更多是技巧
由于在学校里没有系统的前端开发课程，导致对html/css/javascript基本概念的理解非常薄弱。大部分人的学习方式是：先看书，然后觉得书和实践离得很远就直接实践，遇到问题就去网上搜，而搜到的基本都是“技巧”性的东西。或者是跟着学校里的“牛人”学，掺着各种好的、坏的经验全盘接受。比如实现一个左图右内容的显示效果，写出html和css（见下图）。这是我的一道笔试题，看起来很简单吧。但是还没有人答出最佳答案。如果去网上看，国内那些大网站们是怎么实现的，就不能怪他们了。

赞 (0)

相关推荐

  • CSS图文混排的几种方案

    百度新闻首页的方案: 复制代码 代码如下: <table> <tbody> <tr> <td class="topic-pic"><a href=""><img src=""></a></td> <td class="topic-txt">-</td> </tr> </tbody>&l

  • Android下Button实现图文混排效果

    Android下Button实现图文混排效果

    Button实现图文混排效果,具体内容如下 一.简介 本文介绍两种图文混排方式 1.android:drawableTop="@drawable/star"实现文字上有图片 当然有上下左右等等 2.SpannableString的ImageSpan实现图文混排 二.代码实例 效果图: 一二三四是用的第一种方式 下面的用的第二种方式 代码: fry.Activity02 package fry; import com.example.buttonDemo1.R; import andro

  • 详解Android SpannableString多行图文混排的应用实战

    TeXtView大家应该都不陌生,文本展示控件嘛! 就用TextView显示普普通通的文本,OK,很简单,Android入门的都会,没入门的在门缝外看两眼也都会,哈哈,开玩笑.那要是设计在开发需求中要求类似微信聊天表情一样在TextView中插入表情图片呢? 有的小伙伴就会说啦,"TextView添加图片我会啊,不就是drawableLeft,drawableRight嘛!" 嗯 ~ 也行,算是一种方法,可这有一个限制,首先,图片只能在TextView的两端,其次,两端都只能设置一张图

  • Qt数据库应用之实现数据图文混排

    Qt数据库应用之实现数据图文混排

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 除了能够打印基本的文字信息数据到pdf和纸张,越来越多的应用需求还要求能够导出图片,并且要支持图文混排,相当于doc文档类似,当然也不会是太复杂的,类似于打印报表一样,有表格形式的文字描述,也有对应的图片插入其中,图文混排的应用场景还真不少比如医疗行业输出诊断结果往往都带了图片.于是针对这个需求特意开辟了新的类DataCreat专门生成报表的数据,将生成好的数据体直接传入给DataPrint类即可,如果有各种各样的不

  • Android中使用TextView实现图文混排的方法

    向TextView或EditText中添加图像比直接添加文本复杂一点点,需要用到<img>标签. <img>只有一个src属性,该属性原则上应该指向一个图像地址或可以找到某个图像资源的唯一标识.但要注意的是,系统并不会直接根据src属性所指的值自动获取和显示图像,这一切都需要我们去做.说白了,src属性指的是什么只有开发者自己知道.开发者需要告诉系统src属性到底指的是什么,然后系统才会知道怎么做. 解析src属性值需要ImageGetter对象的getDrawable方法来完成.

  • IOS 图文混排（CoreText.framework）详解及实例

    IOS 图文混排（CoreText.framework）详解及实例

    IOS 图文混排(CoreText.framework)        本文主要介绍了IOS图文混排的资料,这里整理了在网上查找的内容,帮助理解,掌握这部分知识,以下就是整理的内容: 利用CORETEXT进行图文混排. 实现代码: void RunDelegateDeallocCallback( void* refCon ){ } CGFloat RunDelegateGetAscentCallback( void *refCon ){ NSString *imageName = (NSStri

  • iOS利用NSAttributedString实现图文混排效果示例

    iOS利用NSAttributedString实现图文混排效果示例

    前言 NSAttributedString 可以非常方便的实现文字排版和图文混排功能,UILabel 和 UITextView 都能添加 NSAttributedString 属性字符串,通过这一点,可以实现带有属性的文字和文字内包含图片的文本内容展示.话不多说了,下面来一起看看详细的介绍吧. 效果如下: 示例代码如下: 1-初始化可变属性字符串 NSMutableAttributedString *attributedString = [[NSMutableAttributedString a

  • CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）

    CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）

    这就出现一个问题,如果图片过小,或文字过长,就会出现文字把整个表格撑得很大,即占用了很多空间,显示效果也非常不美观.网上也有许多解决办法,但要么复杂,要么不能解决跨浏览器问题,要么不能自适应图片大小变化. 在我的这个方法中,解决了: 不需要在代码中指定图片大小.跨浏览器.非常简单.最后的效果如下图所示,当文字过长时,它会自动换行以适应图片宽度: 方法如下: 1)图片及图片说明代码如下: <table class="mod_img" width="10" ali

  • js或css实现滚动广告的几种方案

    在触发js的scroll事件啊,可是我遇到的是真正不动的,我开始以为是FF上面才会这样,没想到IE6和IE7都有如此效果,不得不惊叹神奇了.如是我就找出了如下神奇的代码:仅用CSS实现滚动效果~~ #fixed{position:fixed;} <div id="fixed">滚动</div> 完了,就这个属性就搞定滚动了,真想骂人了.不过还没完呢,这个只支持火狐和IE7,我刚才说过IE6也可以的,只是IE6要实现就有点复杂了, 复制代码 代码如下: <!

  • 移动适配的几种方案(三种方案)

    1.直接利用js适配 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize

随机推荐