首页 web前端 css教程 CSS图文混排的几种方案_CSS/HTML

CSS图文混排的几种方案_CSS/HTML

May 16, 2016 pm 12:03 PM
css html

百度新闻首页的方案:
复制代码 代码如下:


 
 
 
 
 
 


html结构丑陋,但css简单。
新浪微博首页的方案:
复制代码 代码如下:








....



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

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



CSS:
复制代码 代码如下:

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

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


...

...



CSS:
复制代码 代码如下:

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


我写的一个实例
复制代码 代码如下:



   
       


       
       
       
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
两个点博物馆:所有展览以及在哪里可以找到它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

您如何在PHP中解析和处理HTML/XML? 您如何在PHP中解析和处理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示了如何使用PHP有效地处理XML文档。 XML(可扩展的标记语言)是一种用于人类可读性和机器解析的多功能文本标记语言。它通常用于数据存储

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

HTML5 面试问题 HTML5 面试问题 Sep 04, 2024 pm 04:55 PM

HTML5 面试问题 1. 什么是 HTML5 多媒体元素 2. 什么是 canvas 元素 3. 什么是地理定位 API 4. 什么是 Web Workers

Jsoup 示例 Jsoup 示例 Sep 04, 2024 pm 04:55 PM

Jsoup 示例指南。在这里我们分别讨论定义、概述、示例以及代码实现和示例。

在dcat admin中如何实现点击添加数据的自定义表格功能? 在dcat admin中如何实现点击添加数据的自定义表格功能? Apr 01, 2025 am 07:09 AM

在dcatadmin(laravel-admin)中如何实现自定义点击添加数据的表格功能在使用dcat...

HTML 字体 HTML 字体 Sep 04, 2024 pm 04:53 PM

这是 HTML Schriftart 指南。在这里,我们通过适当的语法和相应的示例来讨论 Html Schriftart 的介绍。

HTML 特殊字符 HTML 特殊字符 Sep 04, 2024 pm 04:55 PM

HTML Sonderzeichen 指南。在这里,我们讨论 HTML Sonderzeichen 的介绍、它的工作原理以及相应的示例。

See all articles