实现两列布局中的一列定宽，一列宽度自适应

曾经终败给现在 2022-07-28 04:23 187阅读 0赞

1：/\*这种方法不能撑开父元素的高度\*/(左边定宽，右边宽度自适应)

<div class="container clearfloat">

<div class="mainbox">主要内容区域</div>  
    <div class="sidebox">次要内容区域</div>

</div>

<style>

/\*清除浮动\*/

.clearfloat\{

zoom:1;

\}

.clearfloat:after\{

display:block;

content:"";

height:0;

line-height:0;

clear:both;

visibility:hidden;

\}

.container\{

position:relative;  
\}

.mainbox\{

float:left;

margin-left:200px;  
        background: red;

\}

.sidebox\{

position:absolute;

top:0;

left:0;

width:200px;

background:lightgreen;

\}

</style>

2：/\*能够撑开父元素的高度\*/

<div class="container clearfloat">

<div class="mainbox"><div class="mainbox\_content">主要内容区域</div></div>

<div class="sidebox">次要内容区域</div>

</div>

<style>

/\*清除浮动\*/

.clearfloat\{

zoom:1;

\}

.clearfloat:after\{

display:block;

content:"";

height:0;

line-height:0;

clear:both;

visibility:hidden;

\}

.container\{

text-align:center;

\}

.mainbox\{

float:left;

width:100%;

\}

.mainbox\_content\{

margin-left:280px;

background:lightgreen;

\}

.sidebox\{

float:left;

width:280px;

margin-left:-100%;

background:yellow;

\}

</style>

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关两列布局——左侧宽度固定，右侧宽度自适应的实现方法

左侧宽度固定，右侧宽度自适应的实现方法方法一：左浮动+margin-left 让两个元素在同一行显示首先想到的就是浮动，首先可以让左侧元素浮动,使其脱离文档流...

今天药忘吃喽~/ 2024年04月19日 13:30/ 0 赞/ 76 阅读

相关机房合作—DataGridView列自适应宽度

**目录:** 方法一：定义一个方法：调用这个方法：（dataBill是表格名字）如果没有见效，可以手动拖一下表格到合适的地方，之后就会开始自适应...

快来打我*/ 2024年04月17日 20:25/ 0 赞/ 64 阅读

相关两列宽高自适应

两列布局，要求占满整个页面，其中某列固定，另一列宽度自适应，另外要求两列的高度都要根据屏幕自适应，占满整屏。宽度好整，一列设宽，一列不设宽，只设margin-left或ma

约定不等于承诺〃/ 2023年10月11日 12:26/ 0 赞/ 56 阅读

相关 CSS多种三列自适应布局实现

文章目录第一种：基于float实现第二种：基于position：absolute实现第三种：基于dis

迈不过友情╰/ 2022年11月09日 11:21/ 0 赞/ 297 阅读

相关实现两列布局中的一列定宽，一列宽度自适应

1：/\这种方法不能撑开父元素的高度\/(左边定宽，右边宽度自适应) <div class="container clearfloat"> <div clas

曾经终败给现在/ 2022年07月28日 04:23/ 0 赞/ 188 阅读

相关两列自适应布局的3种思路

[两列自适应布局的3种思路][3] 前面的话　　前面已经介绍过[单列定宽单列自适应][Link 1]的两列布局，而两列自适应布局是指一列由内容撑开，另一列

妖狐艹你老母/ 2022年07月16日 00:54/ 0 赞/ 172 阅读

相关两列布局中单列定宽单列自适应布局的5种思路

前面的话　　说起自适应布局方式，单列定宽单列自适应布局是最基本的布局形式。本文将从float、inline-block、table、absolute和flex这五种思路

妖狐艹你老母/ 2022年07月16日 00:53/ 0 赞/ 202 阅读

相关两种方式实现父布局中两列布局的自适应

自适应宽度是很多网页都具备的特性，因为实现自适应能让用户在改变浏览器窗口大小的同时，仍然可以看到原来版式的布局，并不会因为浏览器窗口的大小而让版面失去了原来设计的布局。

Myth丶恋晨/ 2022年06月16日 04:51/ 0 赞/ 242 阅读

相关 POI Excel列宽中文自适应

POI Excel列宽中文自适应 // 自适应宽度(中文支持) private void setSizeColumn(HSSFSheet sheet) {

╰半夏微凉°/ 2022年05月22日 04:42/ 0 赞/ 688 阅读

相关 C# DataGridVew 列自适应宽度

在使用DataGridView控件来显示数据的时候，如果没有设置列大小自适应，那么出现的情况就是下面： ![watermark_type_ZmFuZ3poZW5naGVpdG

刺骨的言语ヽ痛彻心扉/ 2021年12月12日 09:47/ 0 赞/ 674 阅读