两个左右布局不确定高度的盒子如何保持高度一致 —— table布局

最新推荐文章于 2023-07-29 13:07:10 发布
最新推荐文章于 2023-07-29 13:07:10 发布
阅读量861 收藏 1
点赞数
分类专栏： PC js 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43848576/article/details/123710576
版权
js 同时被 2 个专栏收录
41 篇文章 1 订阅
订阅专栏
PC
21 篇文章 1 订阅
订阅专栏
这篇博客探讨了如何使用CSS实现父盒子table布局，通过`display: table`和`border-spacing`属性设置左右间距为20px。同时，介绍了子元素应用`display: table-cell`来作为表格单元格的技巧，详细阐述了这些CSS属性在网页布局中的应用和效果。
摘要由CSDN通过智能技术生成

在这里插入图片描述

  • 父盒子 table布局且左右间距20px display：table；border-spacing: 20px 0;
  • 子盒子 display: table-cell
小曲曲
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
移动端布局
qq_48666786的博客
09-11 191
手机屏幕小， 网页宽度多数为100%， 是适配手机屏幕宽度移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性。
flex 布局
IT00123的博客
07-26 447
flex 布局
关于左右布局，一边高度不定，另一边和不定高度等高的CSS布局
我不是水哥
06-02 3744
百度上大部分都说设置负padding和负margin值来解决这个问题，事实上这个方法书上就能查到，而且是比较简单的方法，我这里提供另外一种百度不到的方法以及一种更简易的方法，第一种方法利用absolute的垂直文档流自适应属性。想了解absolute的水平垂直文档流自适应的可以参考我CSS的文章，大概是讲absolute那几篇。下面来看解题思路，看下图： 图中的左边是一张图，右边是一段固定的文字，为什么固定的文字不定高呐？因为手机屏幕分辨率的问题，固定的文字也可能不定高。现在我们要让左边的图片高度等于
CSS布局左中右宽度固定高度自动
09-25 1811
弄了一个上午，终于搞定了 我的遇见的布局是左中右，宽度固定，左右随首中间的ＤＩＶ的高度不同要有高度的变化，用表格或iframe实现很简单，但用div+css可有些麻烦， 试过用ＪＳ来初始化共左中右高度，但在中间ＤＩＶ高度有变化时，左右的ＤＩＶ高度并不随着变，终于到了一种“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法， 主要解决的代码是在左右ＤＩＶ中加入 padding-bottom
圆角边框边距，盒子文字阴影，浮动元素，清除浮动的方法
weixin_52013567的博客
11-05 239
圆角边框：border-radius：legth 圆角矩形：border-radius：加高度或者宽度的一半 盒子阴影：box-shadow：后面有六个值。（不影响页面布局，放心使用） 文字阴影：text-shadow：后面有四个值。 浮动：float 浮动特性：1.脱离标准流（脱标）。一行显示并且顶部对齐。具有行内块元素的特性 盒子脱标后不会保留原有位置，后续的盒子会占据被浮动盒子原有的位置 2.浮动元素之间不会有缝隙，会按照顶部对齐。 3.如果父级盒子宽度装不下浮动的盒子，上一排空间不够的盒子会被挤下来
js计算在未知盒子高度时，实现左侧两个盒子的高度与右侧一个盒子的高度保持一致的功能
weixin_40426459的博客
09-19 1017
1.排版需求如下，其中roadmap、buEngagement、overview的高度都是未知的，但是在输入内容后要使得他们的高都保持在一个水平线上 2.首先获得各个模块盒子的高 3.然后将整体排版按左右分为两个模块比较高度来取一个最大值，将其赋值给overview模块，这样overview的总高始终是左侧两盒子的总高 4.接下来，当overview高度达到一定高度时，要考虑给左...
DIV+CSS 网页布局心得
09-27
在布局中，浮动和定位是两个重要的概念。浮动主要用于让元素在一行内排列，常用于创建多列布局。定位则允许元素相对于其正常流中的位置进行偏移，可以精确控制元素的位置，比如固定头部导航。 **4. 层叠性...
IE和谷歌浏览器下div宽度不一致的问题解决.txt
11-28
假设有一个简单的HTML结构，包含一个外部容器和内部的两个子元素，其中子元素采用了`float`布局方式： ```html <div class="item item-1">Item 1 <div class="item item-2">Item 2 ``` 对应的CSS代码如下： `...
HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp
08-10
- `<table>`：定义表格。 - `<form>`：定义用户输入表单。 - **CSS布局**：利用CSS实现页面布局是现代网页设计的基础之一。关键概念包括但不限于： - **盒模型**：每个HTML元素都可以视为一个盒子，由内容、内...
2天掌握DIV CSS网页制作技术
03-24
"DIV+CSS"的叫法源于过去对页面布局方式的对比，传统上，Table布局曾是主流，但随着Web标准的发展，使用XHTML+CSS成为了构建更规范、可维护性更强的网页布局方式。因此，正确的术语应该是XHTML+CSS，其中XHTML代表...
css之两栏布局左侧固定右侧高度自适应
weixin_30339969的博客
05-07 854
css两栏布局之左侧固定右侧高度自适应先看这样的html+css结构： .main { width: 900px; overflow:hidden; margin: 0 auto; border:1px solid #000; } .left { width: 600px; float:left; ...
html设置左右盒子,css--常见左右盒子宽度高度自适应布局
weixin_42467533的博客
06-23 2422
前言前端开发工程师最基础的技能要求是根据 ui 设计稿还原网页，这就缺少不了必要的网页布局，首先看下最近小伙伴问我的一个问题，他说一个网页有左右两个部分，左右两个部分的高度都不固定，要使得右部分的宽度充满剩余的部分，并且高度随着左边的高度发生自适应，而左侧的高度随着内容的高度发生变化，对于这么一个简单的网页布局，对于一个入行不久的小白来说遇到这样的问题肯定束手无策，本文就来整理一下我实现这种布局的...
CSS 小结笔记之解决flex布局边框对不齐
weixin_30822451的博客
10-15 493
在使用flex 进行伸缩布局的时候，经常会给子盒子设置边框，这时经常会出现上下边框对不齐的情况。本篇文章来探讨并解决这个问题。 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me...
解决div元素高度不等于内容高度撑开的问题
最新发布
m0_55315930的博客
07-29 2066
主要目的为了解决一个元素的高度会莫名其妙的高出几像素，而且筛查元素时并不能看到这几像素产生的原因。元素高度不等于内部元素高度所撑开的距离，开发项目中由于遇到了这个问题，之前并没有在意过的，今天总结下理解到原因。希望可以解答一些疑惑。
flex布局 如何 使两个盒子 同高，不固定高度
chenlengsu_it的博客
12-20 5123
首先得保证 双方的 父 盒子 是 flex的 <div ref="flexContainer" class="flex-container"> <div class="column"></div> <div class="column"></div> </div> .flex-container { display: flex; padding: 10px; .column {
Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法
weixin_33720078的博客
06-29 2504
Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法 网上方法很多，个人认为以下两种思想是最为常用的。 一种是让第一个盒子脱离文档流，第二个盒子离左边有一定距离。 第二种方法是使用flex布局，不过有一些兼容性问题。 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
display:inline-block 来解决盒子高度不一样，造成的盒子浮动
ahu2331的博客
07-17 513
<style> ul{ width: 320px; //给父元素添加这两个属性 font-size: 0px; text-align: center/left; } li{ width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px; //子...
右边盒子高度随着左边盒子高度而变化
m0_46430338的博客
12-26 997
思路：父盒子不设置高度，随着左边盒子内容的变化而将父盒子高度撑开，此时父盒子高度等于左边盒子高度，然后再让右边盒子高度为父盒子高度的100% 用于测试，给左边盒子添加内容 <script> const btn = document.querySelector('#btn') const left = document.querySelector('.left') btn.onclick = function () { const value
layui 特定id的table固定列后 左右高度不一致问题如何解决
07-12
要解决Layui中特定ID的表格固定列后左右高度不一致的问题，可以尝试以下方法： 1. 使用 CSS 调整高度：可以通过给固定列容器设置固定高度或使用最大高度来解决高度不一致的问题。例如，可以为固定列容器添加一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小曲曲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值