首页
学习
活动
专区
工具
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. ...>   div>我是定宽块状元素,哈哈,我要水平居中显示。...父元素高度确定的多行文本、图片等的竖直居中的方法有两种: (重要方法)方法一:使用插入 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.6K40

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

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

    1.9K20

    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标签:如div>(两个尖括号加上一个元素名,div>是开始标签,div>是结束标签)。...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属性的空元素 在浮动元素后使用一个空元素如div class="clear">div>,并在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)有: div>、、......元素的高度、宽度、行高以及顶和底边距都可设置。 元素宽度在不设置的情况下,是它本身父容器的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">div>         div class="three">div>     div> div> 很简单不用解释就能看懂,但是这里给出一个table的结构...3.display:table-row;将.row作为表格行tr显示 4.display:table-cell;将.row的下级div作为表格单元格td显示 5.然后定义宽度 这里还使用了 border-spacing

    1.4K70

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

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

    81520

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

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

    31220

    前端面试之HTML && CSS

    box-sizing属性 box-sizing 规定两个并排的带边框的框,语法为 box-sizing:content-box/border-box/inherit content-box:宽度和高度分别应用到元素的内容框...属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的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 55 问

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

    2K20

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

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

    3.5K10

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

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

    91710

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

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

    1.6K30

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

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

    2.5K60
    领券