发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/119533.html原文链接：https://javaforall.cn
左侧固定宽度，右侧⾃适应宽度的两列布局实现 html结构 固定宽度 ⾃适应宽度... 在外层 div （类名为 outer ）的 div 中，有两个⼦ div ，类名分别为left 和 right ，其中 left 为固定宽度，⽽ right 为⾃适应宽度 ⽅...法1：左侧div设置成浮动：float: left，右侧div宽度会⾃拉升适应 .outer { width: 100%; height: 500px; background-color: yellow...float: left; } .right { height: 200px; background-color: blue; } ⽅法2：对右侧:div进⾏绝对定位，然后再设置right=0，即可以实现宽度
因为右边环绕了左边，我们只需要将右边往右边移过去就行了: margin-left: 100px;如果左右两列还想要一点间距，margin-left设置大一点就行了。...两个子级设置display为table-cell，这样他们其实就相当于table的两个单元格。由于我们要固定左边的宽度，父级table应该使用布局优先，即table-layout: fixed;。...不定宽 + 自适应 两列布局，左边不定宽，宽度由内容决定，右边自适应的常见解决方案： 不定宽：float + overflow 跟前面定宽的写法很像，只是左边子级宽度不能写死了，要留给它的子元素决定。...默认的table天生宽度就是内容决定的，左右两边如果内容一样长，那他们的长度可能是一样的，都有留白，像这样： 但是我们想要的是左边挤到内容区，留白都给右边，只需要给左边一个很小的宽度，比如width:...table：布局中我们用到了表格的两个特性，一个是通过table-layout来控制是布局优先还是内容优先，如果将其设置为fixed，可以将一列宽度固定，不受内容长度影响。
案例初始化html结构如下： 案例这里使用的结构比较简单，但是核心思想是实现左边固定，右边自适应。 具体你业务中左边长啥样，右边内部又有啥复杂结构，那就要视具体情况了。...左边图片左浮动float：left、固定宽度、设置margin-right（具体看需求）； 右边文案自适应、overflow或padding或者margin解除文字环绕效果。...如果还想垂直居中， 右边文案此时只需要怪怪的空开左边图片宽度+间距的位置即可 可以让左边图片垂直居中：图片用上50%的top+marginTop的负高度一半。...float：left 需要自适应的文案列margin-right等于固定宽度列的图片宽度+二者间距 有固定宽度的图片列，margin-left负边距为自己的宽度。...七、固定宽度+inline-block普通不一定普通 如果是pc端非自适应的布局，那么固定宽度也未尝不是一个好方法。 ?
单列布局一般有两种形式： 一栏布局 一栏布局头部、内容、底部宽度一致 效果图 代码实现 html css header,footer{ width: 1200px; height: 100px...1 2列布局 2列布局的使用频率也非常高，其实现效果主要就是将页面分割成左右宽度不等的两列。一般宽度较小的一列会设置为固定宽度，作为侧边栏之类的，而另一列则充满剩余宽度，作为内容区。...效果图 先来看看效果： 代码实现 实现两列布局的方法有很多，这里主要介绍两种方法。 calc函数 calc() 函数用于动态计算长度值。...3 列布局在日常开发中使用频率也是很高的，其按照左中右的顺序进行排列，通常中间列最宽，左右两列次之。...的值设为负值的时候，元素会对应的像那个放向移动，比如margin-left为负值，元素则会左移 1 双飞翼布局 代码如下： html 中间 左边 右边 css { margin: 0; padding:
+cont结构 三、类似九宫格布局的两列结构 四、图文两列布局 1、左图右文字非垂直居中， 2、左图，右固定行数的文字，右侧文字和左边图片垂直居中。 ...核心css，我总结有以下几点： 左边内容、右边nav均设置左浮动 main 没有触发bfc，也没有使用伪元素清除浮动，而是使用了一个空标签清除浮动。但我们平时不用空标签，而是用伪类元素。...右边nav栏固定宽度，并用margin/padding-left隔开和左边内容区域的距离 值的注意的是左边内容区域宽度设置为百分百，并使用margin-left负值使得自身向左位移，以给右边的nav...同样，下边这种，也是左边图（只不过是方形的），右边是多行文案。同时这里还设置了两行固定显示，更好说了： 3、左图右文字溢出隐藏 ?...但是细看发现原作把 logo单独摘了出来，logo右边的内容再分两列两端布局。如下画的红框里的绿和蓝： ? 这个就简单多了 ? 左边和右边内容分别左右浮动： ? flex两端布局 ?
，还要向两边寻找最高的列，所以时间复杂度为O(n^2)。...动态规划解法 在上一节的双指针解法中，我们可以看到只要记录左边柱子的最高高度 和 右边柱子的最高高度，就可以计算当前位置的雨水面积，这就是通过列来计算。...当前列雨水面积：min(左边柱子的最高高度，记录右边柱子的最高高度) - 当前柱子高度。 为了的到两边的最高高度，使用了双指针来遍历，每到一个柱子都向两边遍历一遍，这其实是有重复计算的。...我们把每一个位置的左边最高高度记录在一个数组上（maxLeft），右边最高高度记录在一个数组上（maxRight）。这样就避免了重复计算，这就用到了动态规划。...凹槽右边的下标 - 凹槽左边的下标 - 1（因为只求中间宽度），代码为：int w = i - st.top() - 1 ; 当前凹槽雨水的体积就是：h * w。
三列布局的特征是两侧两列固定宽度，中间列自适应宽度。 之所以将二列布局和三列布局写在一起，是因为二列布局可以看做去掉一个侧栏的三列布局，其布局的思想有异曲同工之妙。...######b. position+margin **原理说明**：通过绝对定位将两个侧栏固定，同样通过外边距给两个侧栏腾出空间，中间列自适应。...通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边...设置main宽度为100%，设置两侧栏的宽度。 设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。 设置main的padding值给左右两个子面板留出空间。...设置main-wrap宽度为100%，设置两个侧栏的宽度。 设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。 设置main的margin值给左右两个子面板留出空间。
步骤如下： 左边列开启浮动 右边列开启浮动 右边列宽度为父级 100%减去左列的宽度 实现CSS代码如下： .left { /* 左边列开启浮动 */ float: left; } .right...完成左列定宽右列自适应 步骤如下： 左边列开启浮动 通过外边距的方式使该容器的左边有左边列容器的宽度的外边距 实现CSS代码如下： .left { /* 左边列开启浮动 */ float: left...步骤如下： 开启定位脱离文档流 通过外边距的方式使该容器的左边有左边列容器的宽度的外边距 实现CSS代码如下： .left { /* 开启定位脱离文档流 */ position: absolute...; } .right { /* 通过外边距的方式使该容器的左边有200px */ margin-left: 200px; } 值得注意的是 以上几种方案左边列必须定宽，才可以实现，下面这几种方案左边列可以由子级撑起...实现CSS代码如下： .container { display: grid; /* 将其划分为两行，其中一列有本身宽度决定， 一列占剩余宽度*/ grid-template-columns:
实现原理：动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。表达式为rem = width / n。 通过此方法，rem大小始终为width的n等分。...position: absolute + let: 0; right: 0; top: 0; bottom: 0; margin: auto; 两列布局 左边宽度固定, 右边宽度自适应 左边浮动, 下个元素就会独占位置...,并排一行 left元素浮动， right元素设置 width: 100%; padding-left:left元素的宽度; 右边宽度固定, 左边宽度自适应 左右都浮动,左边自适应元素设置外层div 100%...宽度, 这样就会独占一行, 然后里层设置右边的margin, 把右边元素位置空出来 三列布局 中间自适应, 左右两边固定有如下几种方法 flex布局: display: flex; ustify-content...100%, right设置负左边距为负的自身宽度 4.设置content的padding值给左右两个子面板留出空间 5.设置两个子面板为相对定位，left面板的left值为负的left面板宽度，right
常用属性： column-count: 属性设置列的具体个数 column-width: 属性控制列的宽度 column-gap: 两列之间的缝隙间隔 column-rule: 规定列之间的宽度、样式和颜色...如果设置列的宽度和设置列的个数时自动计算的宽度有冲突时，原则是“取大优先”。...flex-start：让子元素向父元素的起始位置对齐，父元素右边可能会有空余。 flex-end：让子元素向父元素结束位置对齐，父元素左边可能会有空余。...center：让子元素向父元素中间位置对齐，父元素两边可能会有空余。 space-between：最左边与最右边子元素和父元素的左右边对齐，中间子元素平均分布，产生相同的间距。...space-around：将父盒子多余的空间平均分布在子元素的两边。这时子元素与子元素之间的间距是最左边和最右边子元素与父元素间距的2倍。
上下左右四条红色的线分别表示此视图距离父视图的上下左右边的约束各式多少 中间两条上下交叉的线表示，此视图的高度与宽度是否随着父视图的变化而按比例变化 Autoresizing 举个例子： 当我们将左边和上面虚线变成实线时...= 1 << 2, //与父视图左边间距固定，右边可变 UIViewAutoresizingFlexibleTopMargin = 1 << 3, //与父视图下边间距固定，上边可变 UIViewAutoresizingFlexibleHeight...，宽度固定。...、右边距、宽按比例调整，上边距固定，下边距固定，高度固定（这样的约束条件有冲突，会默认上边距不变）垂直方向是同样效果，故不列举 UIViewAutoresizingFlexibleLeftMargin...UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight.gif 综上发现，只要是我们在水平方向同时固定了左边距和右边距，那么我们千万不能固定子控件的宽度
两列布局 两列布局将页面分割成左右宽度不一样的两部分,一般情况下都是左边宽度固定,右边宽度撑满剩余宽度,常用于api网站和后台管理系统。...这种布局当屏幕缩小的时候，或者宽度不够的时候,右边撑满的部分就变成了单列布局,左边的部分改为垂直方向的显示或者隐藏。...三列布局 三列布局是将页面分为左中右水平方向的三个部分比如github。也有可能是水平方向上的两列布局中右边撑满的部分嵌套一个两列布局组成。...圣杯和双飞翼的区别 还有一种布局是垂直方向上的分为上中下三个部分,上和下两部分固定高度,中间部分高度不定,当页面高度小于浏览器高度时,下部分应该固定在浏览器的底部,但是当页面的高度超出浏览器高度的时候,...总结 经典永远都是经典,框架再多选择再多,基础永远是我们需要掌握的,所谓万变不离其中,有了这些基础知识我们只需要灵活的运用即可 1.首先将我们需要布局的大框架写出来,即页面容器的主层次,一般主容器放到次容器的上面
浮动 我们的UI界面中总是有一种场景是：某个容器视图后续添加的子视图的左边总是紧跟着前面添加的子视图的右边，而上边则跟前面视图的上边保持一致进行停靠显示，而当容器视图剩余的宽度空间不够容纳新加入的子视图时则新加入的子视图自动的往下移动且在不覆盖已经排列好的视图的前提下寻找出一个可以容纳其宽度的最合适的位置进行停靠...我们上面说的浮动的规则是在可以容纳新加入视图宽度的情况下新加入的视图的上边和前一个加入的视图的上边对齐，而且新加入的视图的左边必须放置在前一个加入视图的右边。...R2:如果新加入的子视图的宽度能够被放入到前一个加入的视图右边到布局视图右边的剩余宽度空间中的话，则新加入的视图的左边位置是等于前一个加入视图的右边位置，且新加入视图的上边位置和前一个加入的视图的上边位置保持一致...在前面的所有向左浮动的例子中，我们的剩余宽度的比较总是以布局视图的右边界为标准的，而前面所有向右浮动的例子中我们的剩余宽度的比较总是以布局视图的左边界为标准的。...，而向右浮动的视图的剩余宽度的左边界是在不覆盖掉左边视图的情况下的最大向左浮动的视图的右边界。
UIViewAutoresizingFlexibleWidth // 自动弹性的调整自己的宽度，保证与superView左边和右边的距离不变。 ...UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleWidth .gif 综上发现，只要是我们在水平方向同时固定了左边距和右边距...比如，给某个子控件A设置了左边距和右边距后，虽然没有明确指定子控件A的宽度，但是其左右边距一旦设置，那么宽度可以根据子控件A和父控件左右之间的边距自动推算出来。...红色: 距离顶部有20 == 相当于设置了Y 距离左边有20 == 相当于设置了x 设置宽度等于100 设置高度等于100 4.约束警告 如果看到Storyboard中有黄色的箭头,...Snip20160515_2.png 3.两个有层次关系的view之间的约束关系，添加到层次较高的view上 ?
固定列需要在el-table-column 上设置fixed属性，它接受Boolean值或者left right,表示左边固定还是右边固定 <el-table :data="tableData...template> 在小屏幕上含有滚动条，显示是正常的，但是如果是大屏幕没有滚动条就在底部约17像素的地方<em>有</em>一条线...通过审查元素发现，如果是左侧<em>固定</em>，不管有没有滚动条.el-table-fixed 这个元素 样式都是距离底部17px， ? <em>固定</em><em>右边</em>的<em>列</em>类似，只是样式没有直接写bottom:17px 如何解决呢？...思路：页面解析完成后，如果内容的<em>宽度</em>小于或者等于容器的<em>宽度</em> 就把bottom设置为1px 完整的代码 mounted() { //修改<em>固定</em>列有和没有滚动条的样式 var wrapWidth
单元格的行和列可以组织成行组和列组。行，列，行组，列组和单元格可以在它们周围绘制边框（CSS 2.2中有两个边框模型）。...第三条规则使“totals”列变为蓝色，最后两条规则通过使用固定布局算法fixed layout algorithm显示如何使列成为固定大小。...每个column group从顶行的单元格的顶部延伸到底行的单元格的底部，并从其最左列的左边缘延伸到其最右列的右边缘。...这允许动态效果删除表格行或列而不强制对表格进行重新布局，以考虑列约束中的潜在变化。 6. 边框 borders 为CSS中的表单元格设置边界有两种不同的模式。...UA必须通过检查表格第一行中的第一个和最后一个单元格来计算表格的初始左边界和右边界宽度。表格的左边框宽度是第一个单元格的折叠左边框的一半，并且该表格的右边框宽度是最后一个单元格的折叠右边框的一半。
-- 左边导航 --> ... ... ... ......flex-direction: column; } .container__content { /* 内部部分占据剩余的高度部分 */ flex: 1; } 5、Sidebar（侧边导航栏） 两列布局...，左边是导航栏目，右边是内容部分。
创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。 9. 如何设置小于 12px 的字体？...两栏布局的实现 • 左边固定，右边自适应 • 利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。...左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。...左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0。...父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
