Html 如何允许一列自动调整大小，同时为另一列指定固定位置？_Html_Css

Html 如何允许一列自动调整大小，同时为另一列指定固定位置？

html css

Html 如何允许一列自动调整大小，同时为另一列指定固定位置？,html,css,Html,Css,我写了下面的代码，这是一个混乱我希望左sbr和右sbr位于固定位置，但允许内容根据浏览器或窗口的分辨率自动调整大小。我该怎么做 .left-sbr{ width:240px; color:#2d2d2d; float:left; border:1px solid #0066FF; position:fixed; top:33px; left:43px; } .content{ /*width:500px;*/ margin:33px 1px 0px 287px; padding:0px 0px

我写了下面的代码，这是一个混乱

我希望

左sbr

和

右sbr

位于固定位置，但允许

内容

根据浏览器或窗口的分辨率自动调整大小。我该怎么做

.left-sbr{
width:240px;
color:#2d2d2d;
float:left;
border:1px solid #0066FF;
position:fixed;
top:33px;
left:43px;
}
.content{
/*width:500px;*/
margin:33px 1px 0px 287px;
padding:0px 0px 0px 0px;
position:absolute;
width:50%;
/*left:287px;
top:33px;*/
height:100%;
color:#2d2d2d;
float:left;
border:1px solid #0066FF;
}
.right-sbr{
/*margin:33px 0px 0px 0px;
padding:0px 0px 0px 0px;*/
width:23%;
position:absolute;
top:33px;
left:100%;
color:#2d2d2d;
float:right;
border:1px solid #0066FF;
}

以下是HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<title>Learning English Grammar for Non Native Speakers</title>
<link rel="stylesheet" href="in-design.css"/>
</head>
<body>
<div class="left-sbr">
aaaaaaaaaaaaaaa
</div>
<div class="content">Data pada komputer diolah dan simpan dalam bentuk digital atau bilangan biner. Digital hanya mngenal dua nilai saja yaitu : 0 dan 1. Setiap 0 dan 1, disebut dengan istilah bit (binary digit). Bilangan yang terdiri atas delapan nilai (misalnya 10001001) disebut dengan byte (8 bit).<br>
Dalam dunia digital, ada dua jenis basis satuan, definisi basis 2 dan basis 10. Pada basis10, satu kilo berarti 1000 sedangkan pada basis 2 berarti 210 =1024. Berikut tabel basis satuan yang  perlu anda ketahui: Ukuran Definisi basis 2 Defenisi basis 101 kilobytes 1024 byter 1000 bytes1 megabytes 1024 KB=1.048.576 bytes 1000.000 bytes1 gigabytes 1024 MB=1.073.741.824 bytes 1000.000.000 bytes.<br>
</div>
<div class="right-sbr">
cccccccccccccccccc</div>
</body>
</html>


为非母语人士学习英语语法
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
数据来源于计算机数据和数字数据。数字时代：0和1。设置为0和1，但不包括二进制位。一个字节（8位）的最大值（misalnya 10001001）。

达拉姆·杜尼亚数字公司（Dalam Duna digital），阿达·杜瓦·杰尼斯公司（ada dua jenis）的基础数据，定义基础2和基础10。以10为基数，以1000为基数，以2为基数，以210=1024为基数。最重要的一点是：英国定义基础2防御基础101千字节1024字节1000兆字节1024 KB=1.048.576字节1000.000字节1024 MB=1.073.741.824字节1000.000.000字节。

中交

如果我了解您想要什么，那么您可以尝试以下方法（无需jquery）：


*{边距：0；填充：0；}
#内容{位置：绝对；宽度：100%；高度：100%；颜色：白色；}
.left sbr{浮动：左；边距：0px 0px；宽度：25%；高度：100%；背景：绿色；}
.资源中心{浮动：左侧；边距：0px 0px；宽度：50%；高度：100%；背景：灰色；}
.right sbr{浮点：右；边距：0px 0px；宽度：25%；高度：100%；背景：蓝色；}
左边
中心或内容（根据需要）
正确的

这是3列（左内容右），您提供的左右侧边栏确实有效，但内容呢。。。我的意思是，我希望它（内容）根据windows分辨率或浏览器自动调整大小。您希望，该内容将位于页面中心吗？关于调整大小：您可以使用

@仅媒体屏幕和（最大宽度：您的宽度）{}

是的，它是纯css.hihihi。。它有效！！！。最大宽度。。然后我就把它定制成我想要的程序。。非常感谢^ ^再次感谢：D正如您所知，我尝试不使用jquery或javascript来快速加载页面（SEO方法，对吗？）：D

<html>
<head>
<style>
* { margin:0; padding:0; }
#content { position:absolute; width:100%; height:100%; color:white; }
.left-sbr { float:left; margin:0px 0px; width:25%; height:100%; background:green; }
.content-center { float:left; margin:0px 0px; width:50%; height:100%; background:grey; }
.right-sbr { float:right; margin:0px 0px; width:25%; height:100%; background:blue; }
</style>
</head>
<body>

<div id="content">
  <div class="left-sbr">left</div>
  <div class="content-center">center or content (as you want)</div>
  <div class="right-sbr">right</div>
</div>