首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我如何在不使用table的情况下重写这个简单的表?有两个div并排的,左边的居中

在不使用table的情况下重写这个简单的表,可以使用CSS的布局来实现。以下是一种可能的解决方案:

HTML结构:

代码语言:txt
复制
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS样式:

代码语言:txt
复制
.container {
  display: flex;
  justify-content: center;
}

.left, .right {
  width: 50%;
  height: 200px;
}

.left {
  background-color: #ccc;
}

.right {
  background-color: #ddd;
}

解释:

  • 使用一个父容器(container)来包裹两个并排的div。
  • 设置父容器的display属性为flex,这样可以实现子元素的水平排列。
  • 设置父容器的justify-content属性为center,这样可以使子元素在水平方向上居中对齐。
  • 设置左右两个div的宽度为50%,这样可以使它们平分父容器的宽度。
  • 设置左边div的背景颜色为#ccc,右边div的背景颜色为#ddd,这只是为了示例,你可以根据实际需求进行修改。

这样,通过使用CSS的布局技巧,你可以在不使用table的情况下实现两个div并排且左边div居中的效果。

关于云计算和IT互联网领域的名词词汇,这个问题并没有涉及到具体的概念,分类,优势,应用场景等内容,因此无法提供相关的答案。如果有其他具体的问题,欢迎提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS再学

比如下面代码:某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中所有子元素文本,这里子元素为span标签。...每个块级元素都从新一行开始,并且其后元素也另起一行。 2.  元素高度、宽度、行高以及顶和底边距离都可设置。 3.  元素宽度在设置情况下,是它本身父容器100%,除非设置一个宽度。...浮动模型(float): 任何元素在默认情况下是不能浮动,但可以使用CSS定义浮动,div、p、table、img等元素都可以被定义为浮动。 层模型: 层模型三种形式: 1. ...>   是定宽块状元素,哈哈,要水平居中显示。...父元素高度确定多行文本、图片等竖直居中方法两种: (重要方法)方法一:使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

2K70

第五节 关于浮动和清除浮动解说,以及两个大坑不要踩

所以,table布局还是必要意义。那么,我们在学习过程中,是不是一定要把table布局弄得非常精通呢?...解决方法很多,最简单,就是给这个span元素添加一个“display:block”或者“display:inline-block”样式,就可以解决这个问题了。 ?...布局,我们一般就用table,或者div、span,加上css就可以了。p元素就是用来存放文字,明白了吗? 4.惊!多个div元素为了并排显示,连这种事都干得出!...那么,在我们开发网页时候,我们肯定希望这样事情发生吧,还记得我们当初采用浮动布局目的是什么吗,是不是要让几个块级元素并排显示呀?...一个办法就是在浮动定位最后一个元素后面,加上一个空元素,比如div元素,里面啥也写,然后加上一个叫做clear:both样式,那么,浮动就被清除了。 ?

1.1K70
  • html 怎么让整体居中,html中表格整体居中 详解html里面如何让表格居中

    大家好,又见面了,是你们朋友全栈君。 把表格在页面中间显示。。。 分享代码。。。在这个无谓年华,无论别人多么高高不可攀比,但小编还是选择,做一个适应自己的人。...请问html里面如何让表格居中 HTML中如何将表格居中排列如何将两个并排表格居中排列。...就是两个表格排在一起,让后两个表格刚这位网友欢迎来到四十五资源网,你可以将两个表格分别设置为左浮动,然后用一个大div两个表格包起来,设置大div左右margin为auto即可。...这两个属性综合使用,就可以让单元格内容上下左右都居中显示。...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。发现本站涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    5.5K40

    css布局 - 两栏自适应布局几种实现方法汇总

    那inline-block携手width也是个好方法 * 以下汇总方法贴图,都是和上边这个图一模一样效果。...案例初始化html结构如下: 案例这里使用结构比较简单,但是核心思想是实现左边固定,右边自适应。 具体你业务中左边长啥样,右边内部又有啥复杂结构,那就要视具体情况了。...注意padding或margin值=左边图片宽度+二者之间间距 如果想要图片和文案是垂直居中不太好实现 不过张大神说,这种左右结构布局使用浮动,是对浮动一种滥用(大概是这么个意思,也有可能对其曲解...六、table-cell - 伪表格布局 table老人家启发,让想起来css中还有一个属性display,他值是可以仿造table。...:table;(自己测试设置这一条也可以) 两列都设置display:table-cell;[w3c:此元素会作为一个表格单元格显示(类似td 和 th)] 别忘了两列之间间隙,比较喜欢用文字

    1.8K20

    CSS 基础系列:从清除浮动和margin塌陷问题谈BFC

    1.1 方法 常用方法: 给浮动元素父元素一个固定高度(推荐) 给浮动元素新增一个空 div 兄弟元素,设置 clear:both 给浮动元素新增一个 兄弟元素,设置 clear 属性为...或 fixed; display 值为 inline-block、table-cell、table-caption、table、flex、inline-flex、flow-roottable 本身生成...如果父元素宽度足以包含这两个子元素宽度之和,则子兄弟元素和子浮动元素并排。如图: image.png 如果父元素宽度不足以包含这两个子元素宽度之和,则子兄弟元素会出现在子浮动元素下面。...IFC 中是不可能有块级元素,当插入块级元素时( p 中插入 div)会产生两个匿名块与 div 分隔开,即产生两个 IFC,每个 IFC 对外表现为块级元素,与 div 垂直排列。...即使偏移,仍然保留原有的位置,其它普通流不能占用这个位置。

    2.5K10

    关于Html与css一些解释

    二、标签与元素 1、html标签:(两个尖括号加上一个元素名,是开始标签,是结束标签)。...Margin似乎也一样,不懂可以试试。  18、居中方式: (1)在一个元素外面加一个div,并给这个div加上text-align属性,属性值为center.  ...原理:text-align:center;是让div内部元素居中显示,并且由div宽度决定。默认情况下div宽度是占满整个网页。...故相div内部元素相对于整个网页居中 (2)margin:auto;这个用法很常见,但是又特定要求,就是一定要给你想要居中元素一个宽度值(百分比也好固定宽度也好)     原理:浏览器解析时会自动给宽度元素左右两边赋予相等外边距...默认情况下绝对定位是相对于body这个元素进行定位,但是如果离他最近一个祖先元素有设置position为absolute或者relative。那么他就相对于这个祖先元素进行定位。

    1.4K120

    盒模型

    可以将侧边栏改为宽26%,两列能够并排放下,但是这种方式不可靠。 魔术数值不是一个理想值,而是通过改样式试出来值。在编程中推荐魔术数值,因为往往难以解释一个魔术数值生效原因。...如果不理解这个数值是怎么来,就不会知道在不同情况下会产生什么样结果。 替代魔术数值一个方法是让浏览器帮忙计算。 calc(30% - 3em),但是还有更好解决办法。...最终需要写另外样式将组件内元素恢复为 content-box。 一种简单方式,是利用继承改一下修改盒模型方式。...CSS 中最简单垂直居中方法是给容器相等上下内边距,让容器和内容自行决定自己高度。...这是用户代理样式添加,但当前后叠放两个段落时,它们外边距不会相加产生一个 2em 间距,而会折叠,只产生 1em 间隔。 折叠外边距大小等于相邻外边距中最大值。

    1.9K20

    web前端面试中10个关于css高频面试题,你都会吗?

    非浮动元素会覆盖浮动元素位置 margin会传递给父级元素 两个相邻元素上下margin会重叠 开发中应用 阻止margin重叠 可以包含浮动元素 —— 清除内部浮动(清除浮动原理是两个 div...清除浮动哪些方法, 各有什么优缺点 使用clear属性空元素 在浮动元素后使用一个空元素,并在CSS中赋予.clear{clear:both;}属性即可清理浮动...优点: 浏览器支持好,不容易出现怪问题(目前:大型网站都有使用:腾迅,网易,新浪等等) 缺点: 代码多,要两句代码结合使用,才能让主流浏览器都支持 给父级元素设置高度 简单, 代码少,好掌握 缺点:...用纯CSS创建一个三角形原理是什么 之前写三角形, 都是直接记住代码,没有探究原因,也是直到一次面试时,面试大哥让说说css创建三角形原理,就......回来就赶紧翻资料.接下来就将当时理解过程列举出来...三角形这样就出来, 简单, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样 .box{ width:0px; height:

    2.8K20

    前端基础篇之CSS世界

    想你每天写css代码有时候也会觉得很痛苦:这个布局css怎么这么难实现!也经常会有这种感觉,一个看似简单布局总是要琢磨半天才能实现,偶尔还会出现一些怪异超出理解现象。...“流体布局”是html默认布局机制,如你写html不用css,默认自上而下(块级元素div)从左到右(内联元素span)堆砌布局方式。 块级元素和内联元素 这个大家肯定都知道。...块级元素是指单独撑满一行元素,div、ul、li、table、p、h1等元素。这些元素display值默认是block、table、list-item等。...内联元素又叫行内元素,指只占据它对应标签边框所包含空间元素,这些元素如果父元素宽度足够则并排在一行显示span、a、em、i、img、td等。...左边缘可能是content box左边缘(非绝对定位position: absolute),也可能是padding box左边缘(position: absolute)。

    2.1K50

    CSS概要

    CSS 基础知识 语法 CSS全称为“层叠样式 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内显示样式, 文字大小、颜色、字体加粗等。...常用块状元素(display: block): 、、......元素高度、宽度、行高以及顶和底边距都可设置。 元素宽度在设置情况下,是它本身父容器100%(和父元素宽度一致),除非设定一个宽度。...在流动模型下,内联元素都会在所处包含元素内从左到右水平分布显示。 浮动模型 float 浮动模型,浮动(Float)如果想让两个块状元素并排显示,需要用到浮动模型。...高度一致来实现 • 垂直居中-父元素高度确定多行文本 使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle 设置块级元素 display

    1.4K50

    table一样布局div

    ,是根据我对文章理解意译,你就别挑哪里翻译不对了,目的只是传达这个CSS技巧 许多网页设计师都喜欢,将两个或者多个容器等高并排放置,并在里面展示每个容器内容,就象经典表格布局中单元格控制几个栏目的位置...,也喜欢容器内容居中或顶部对齐显示。...其实有个简单方法,使用display:table, display:table-row and display:table-cell 就可以实现,而且高度小容器会自适应那些高度相对较高,但是IE不支持这个属性...class="two">             很简单不用解释就能看懂,但是这里给出一个table结构...3.display:table-row;将.row作为表格行tr显示 4.display:table-cell;将.row下级div作为表格单元格td显示 5.然后定义宽度 这里还使用了 border-spacing

    1.3K70

    冷门布局方法 tabel-cell 可行性研究

    display:table-cell 属性简介 display:table-cell;会使元素表现类似一个表格中单元格 td,利用这个特性可以实现文字垂直居中效果。...小结: 不要与 float:left; position:absolute; 一起使用。 可以实现大小固定元素垂直居中。 margin 设置无效,响应 padding 设置。...class="table-left">        左边                是中间    <...诡异百分比宽高 使用 table-cell 一个让人很抓狂地方,那就是他宽高是不能使用百分比设置,具体原因我一直没有找到,只能理解为这是这个属性特性。希望有知道老铁告知一声。...A: 相对其他布局方式,其实并没啥优势,而且还是属于比较小众布局方式。但是针对一些特殊场景,使用起来还是很方便。比如对于列子一,使用 table-cell 方式就要比其他布局方式简单

    63920

    全栈之前端 | 4.CSS3基础知识之盒子模型学习

    : 0px auto; } /* 2.不定宽块元素由于网页分页我们不能预判,所以我们不能提前设置它宽度,但我们可以使用以下三种方式让其居中 */ /* A: 加入Table标签 */ table {...> 指定两个值时,第一个值会应用于上边和下边外边距,第二个值应用于左边和右边。 > 指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边外边距。...由于CSS外边距合并规则,这两个外边距会合并为一个外边距,所以实际上这两个元素之间垂直距离是20px,而不是40px。...class="demo1"> I have a border, 一个边框,使用border属性设置outset样式。... 这个 div 在边框边缘之外 15 像素处一个轮廓。 示例 2.outline 与 outline-offset 属性使用演示。

    28920

    前端面试之HTML && CSS

    box-sizing属性 box-sizing 规定两个并排带边框框,语法为 box-sizing:content-box/border-box/inherit content-box:宽度和高度分别应用到元素内容框...属于同一个BFC两个相邻Boxmargin会发生重叠 每个元素margin box左边, 与包含块border box左边相接触(对于从左往右格式化,否则相反 BFC区域不会与float...(1)table标签配合margin左右auto实现水平居中。...使用table标签(或直接将块级元素设值为 display:table),再通过给该标签添加左右margin为auto。 (2)inline-block实现水平居中方法。...简单说它就是一个相对单例 :font-size:10px;,那么(1rem = 10px)了解计算原理后首先解决怎么在不同设备上设置 html font-size 大小。

    4.4K10

    css布局 - 垂直居中布局一百种实现方式(更新中...)

    首先将垂直居中现象和实现方式两大方向细分类如下: ? 接下来逐条累加不同情况下垂直居中实现。...帮多行文本找一个继父来领养他,让继父弥补父元素给他带来伤害(行高和水平居中对齐样式修改) 2. margin负边距简单处理一下底部小“裂痕” 三、父元素高度 固定时,单行文本 | 图片绝对垂直居中...那好,现在直接使用这个方法实现一个宽高固定图片垂直居中应该也很赞了吧?! 结果一顿操作这个结果很不满意: ? 这不用比较也知道,图片没有上下垂直居中啊!毛线。那个标题还那么深,实例打脸。...两个例子代码挪到一个html页面,惊奇发现,底部剩余空间都是比顶部少4像素! 于是,一不做二不休,直接使用margin负值让元素再之前基础上向上4像素,竟真的实现了绝对垂直居中。 ?...,使用table布局就可以完成完美的自动水平垂直居中了。

    3.5K10

    前端硬核面试专题之 CSS 55 问

    JPG 不适用于所含颜色很少、具有大块颜色相近区域或亮度差异十分明显简单图片。 PNG 特性 能在保证最不失真的情况下尽可能压缩图像文件大小。...初始化样式会对 SEO 一定影响,但鱼和熊掌不可兼得,但力求影响最小情况下初始化。...---- 一个高度自适应 div,里面有两个 div,一个高度 100px,如何让另一个填满剩下高度 ?...大家要注意 html 中必须使用 div 标签,不要妄图使用什么 p 标签来达到目的。因为 div 个默认属性,即如果设置宽度,那它会自动填满它父标签宽度。这里 main 就是例子。...这个方法看起来很完美,只要我们记得清除浮动(这里用了最简单方法),那 footer 也不会错位。而且无论 main 和 sidebar 谁更长,都不会对布局造成影响。

    2K20

    前端学习(13)~css学习(七):浮动

    也就是说: 此时这个div不能设置宽度、高度; 此时这个div可以和别人并排了。 举例如下: ?...我们要明白,浮动开始,就要有清除。 我们先来做个实验。 下面这个例子,两个块级元素divdiv没有任何属性,每个divli,效果如下: ? 上面这个例子很简单。...举例如下: (1)我们在一个div里放一个宽高p,效果如下:(很简单) ? (2)可如果在此基础之上,给p设置浮动,却发现父亲div没有高度了: ?...兼容是overflow:hidden;清除浮动时候。 总结: 我们刚才学习两个IE6兼容问题,都是通过多写一条hack来解决这个我们称为伴生属性,即两个属性,要写一起写。...文本居中,要使用text-align:center; 对上面的第三条总结一下:(非常重要) margin:0 auto; //让这个div自己在大容器中水平方向上居中

    90710

    CSS-垂直|水平居中问题解决方法总结

    题外话:前两天和专业老师探讨最近一个项目,涉及到对一个浮动盒子局中问题,老师解决方法打开了新思路。让了总结一下平时居中问题想法。不然可能忘掉了以后又要到处寻找解决办法了。...: 方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。...至于怎么获得字体高度,就去浏览器调试工具(Dreamweaver也可以也有这个功能,实时编辑工具都是可以。)中看。当设置高度值得时候,将鼠标移到对应标签上,自然会有宽高显示出来。...第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素方法一样)。...class="article-title-cont">这里是这个故事总标题,左边照片也可以没有 3 css .article-title { float: left

    2.5K60

    前端入门4-CSS属性样式声明正文-CSS属性样式

    正文-CSS属性样式 了解了 CSS 具体各种工作原理、使用方式、选择器规则、层叠算法等之后,那么该来学习也就是 css 都支持哪些属性样式了。...,想让文本居中显示时,如果属性生效,可自行计算,如下: ?...,因此这种情况下,可以解决并排场景。...float 浏览器绘制这个网页时,按照文档流顺序,先在网页第一行左边开始处理 div1 元素,发现它一个浮动元素,则将其抽离到另一个层面,浮动在文档流上面。...然后它继续处理 div2 元素,因为之前处理 div1 元素是浮动元素,不占用文档流,所以此时仍旧是在第一行左边绘制 div2 元素,发现它是一个块级元素,所以让其霸占一整行。

    1.6K30
    领券