用div+css 制布局设计 三行 第二行分成两列 需要生成两个文件

Posted 2023-05-15

用div+css 布局设计 三行 第二行分成两列 需要生成两个文件
用div+css 布局设计 三行 第二行分成两列 只需要代码 其它问题可以暂不考虑

<style type="text/css">
<!--
#main
float:left;
margin:auto;
width:645px;
height:393px;
text-align:center;

#row1
float:left;
margin:auto;
width:645px;
height:80px;

#row2
float:left;
margin:auto;
width:645px;
height:217px;

#row3
float:left;
margin:auto;
width:645px;
height:95px;

#left
float:left;
margin:auto;
width:323px;
height:217px;

#right
float:left;
margin:auto;
width:322px;
height:217px;

-->
</style>
<div id="main">
<div id="row1">
</div>
<div id="row2">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="row3">
</div>
</div> 参考技术A <div id="d1" style="background-color: red;width: 100px;height: 80px;"></div>
<div id="d2" style="float: left ;background-color: blue;width: 100px;height: 80px;"></div>
<div id="d3" style="background-color: black;width: 100px;height: 80px;"></div>
<div id="d4" style="background-color: green;width: 100px;height: 80px;"></div> 参考技术B 4个div,23左浮动,4清除浮动 参考技术C 需要生成两个文件？

css 两列布局 右边固定 左边可伸缩 但是有最小宽度 如何实现？

至少也给出个类似于百度的搜索结果页的布局：右边块固定大小，左边块也固定大小，右边块向右边浮动。拉伸变动浏览器的大小，能改变左右2块的距离，中间空白 可伸缩。如何实现。看百度的搜索结果页，就能知道什么效果了。

参考技术A 你要留在中间的给他加个css样式
样式就用.BD表示
就写
.BDmargin:0px
auto;width:400px;height:300px
然后给你的右边那个弄个绝对定位
.Bdposition:absolute;right:0px;top:0px
把这两个样式弄进去就ok了
右边漂浮的东西