「已注销」 2016-12-15 06:48 采纳率: 46.7%
浏览 4557
已采纳

如何用div+css制作一个两行五列的类似表格的东西

好吧，对于div+css我是完全的菜鸟，哪位大神帮忙写一下呀。谢谢

  • 写回答

11条回答 默认 最新

  • niepxiya 2016-12-15 08:15
    关注

    <!DOCTYPE html>



    Document
    <br> .d_body{<br> height: auto;<br> width: 287px;<br> background-color: yellow;<br> }<br> .d_row,.d_row1{<br> border:1px solid black;<br> }<br> .d_row1{<br> border-top: 0px;<br> }<br> .span1{<br> border-right: 1px solid black;<br> width: 54px;<br> padding: 1px 15px 1px 15px;<br> }<br> .span2{<br> border-right: 1px solid black;<br> width: 54px;<br> padding: 1px 20px 1px 20px;<br> }<br> .span3{<br> border-right: 1px solid black;<br> width: 54px;<br> padding: 1px 16px 1px 16px;<br> }<br> .span4{<br> border-right: 1px solid black;<br> width: 54px;<br> padding: 1px 16px 1px 16px;<br> }<br> .span5{<br> width: 54px;<br> padding: 1px 14px 1px 14px;<br> }<br> .span6{<br> border-right: 1px solid black;<br> width: 54px;<br> padding: 1px 15px 1px 15px;<br> }<br> .span7{<br> border-right: 1px solid black;<br> width: 54px;<br> padding: 1px 4px 1px 4px;<br> }<br> .span8{<br> border-right: 1px solid black;<br> width: 54px;<br> padding: 1px 14px 1px 14px;<br> }<br> .span9{<br> border-right: 1px solid black;<br> width: 54px;<br> padding: 1px 9px 1px 9px;<br> }<br>


    <div class="d_body" 
    <div class="d_row">
  <span class="span1">this</span>
  <span class="span2">is</span>
  <span class="span3">my</span>
  <span class="span4">div</span>
  <span class="span5">and</span>
</div>
<div class="d_row1">
  <span class="span6">css</span>
  <span class="span7">create</span>
  <span class="span8">like</span>
  <span class="span9">table</span>
  <span class="span0">function</span>
</div>



    图片说明

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(10条)

报告相同问题？

  • 实验一 使用DIV+CSS制作网站首页
    2025-05-18 01:12
    wenmou1111的博客 使用 DIV 元素构建页面布局，分为顶部标题栏、导航栏、数据表格和图表展示区域。每个图表设置标题、数据、坐标轴等配置项，并在指定的 DIV 区域中显示。使用 ECharts 初始化多个图表实例，分别显示 DHCP 解析日志...
  • [WEB安全] DIV+CSS基础(非常详细)
    2024-07-27 04:28
    千寻361的博客 DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的...
  • 第九章DIV+CSS布局
    2024-12-09 15:12
    Luz樣的博客 DIV组成了网页的格局，CSS则装饰了格局，比如建一栋房子，开始的架子是DIV，架子搭建好后开始装饰，这个装饰就是CSS样式。使用了DIV+CSS布局的网页，它使HTML语言变得越来越复杂化、专用化源码容易扩展，并且更加...
  • DIV＋CSS布局
    2021-10-17 11:29
    非早起选手的博客 DIV+CSS布局
  • html中div页面布局,前端入门篇（二）：利用Div + CSS快速布局页面
    2021-06-12 14:22
    竹宫英朗的博客 但是这种布局方式有很大的局限性——比如，同一行或列的单元格在长度、宽度上会相互影响和制约等。如今，表格式布局早已不再流行，本文就此介绍将其「拍死在沙滩上」、目前最为广泛采用的网页布局方式——Div + CSS...
  • div+css实现两列table效果示例
    2020-09-25 03:50
    在当前的前端开发中，使用Div和CSS来模拟传统的表格布局是一种常见且有效的方法。本文将介绍如何通过Div和CSS实现类似表格的两列布局效果。这种布局技术不仅在样式上可以达到与表格类似的视觉效果，而且在灵活性和可...
  • 第九章 DIV+CSS布局
    2024-12-08 23:01
    说谎的木偶的博客 DIV组成了网页的格局，CSS则装饰了格局，比如建一栋房子，开始的架子是DIV，架子搭建好后开始装饰，这个装饰就是CSS样式。上中下布局符合许多网站共同的特点，即div-top是导航或者横幅广告，div-main是视觉集中点，...
  • DIV+CSS布局（进阶篇）
    2019-01-29 13:57
    影雀的博客 学习前端必不可少的就是学习HTML语言以及CSS样式的布局，这也通常是新手入门的拦路虎，结合上次的...第一种布局样式：css三行三列布局 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;h...
  • 第九章 DIV+CSS模型
    2024-11-17 22:12
    江恸的博客 DIV + CSS 是一种网页布局技术。其中，DIV（division）是 HTML 中的一个标签，主要用于划分网页的区域，它本身没有任何样式，只是一个块级元素。CSS（Cascading Style Sheets，层叠样式表）用于控制网页的样式，包括...
  • DIV+CSS表格代码.rar
    2010-05-16 21:46
    在“DIV+CSS表格代码”中，开发者可能已经展示了如何用`DIV`代替`<table>`标签来创建表格，同时使用CSS来设置单元格的宽度、高度、对齐方式，以及行和列的间距。这样的做法有助于提升网页的性能，因为CSS渲染通常比...
  • 没有解决我的问题, 去提问