左右定宽中间自适应布局

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

.left {
float: left;
width: 200px;
height: 200px;
background-color: red;
margin-right: -200px;
}

.middle {
float: left;
width: 100%;
}

.middle-content {
height: 200px;
margin-left: 200px;
margin-right: 200px;
background-color: yellow;
}

.right {
float: right;
width: 200px;
height: 200px;
background-color: blue;
margin-left: -200px;
}
</style>
</head>

<body>
<div class="left"></div>
<div class="middle">
<div class="middle-content"></div>
</div>
<div class="right"></div>
</body>

</html>

时间: 2024-10-11 22:21:17

左右定宽中间自适应布局的相关文章

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

× 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex 前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute和flex这五种思路来详细说明如何巧妙地实现布局 思路一: float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错

css 两列布局中单列定宽单列自适应布局的6种思路

前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现布局 float [思路一]float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错的效果 [1]float + margin 将定宽的一列使用float,而自适应的一列使用计

CSS布局 两列布局之单列定宽,单列自适应布局思路

前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, flex, grid 这几个布局方式来实现这种效果 float [float + margin] 将定宽的一列使用float,而自适应的一列使用计算后的margin <style> .f1 .parent{overflow: hidden;zoom: 1;} // 触发bfc和haslayout来闭合

右侧定宽左侧自适应布局

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .left { margin-right: 200px; height: 200px; background-color: red; } .

左边定宽右边自适应布局

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 300px; } .main { box-sizing: bord

左边定宽 右边自适应的写法

<html><head> <title>左边定宽 右边自适应</title> <meta charset="utf-8"> <style type="text/css"> .left{float: left;width: 200px;margin-right: -100%} .content{float: left;width: 100%;} .contentInside{margin-left

CSS基础布局--居中对齐,左侧定宽右侧自适应

CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一些方法.如果你有更多关于布局方面的技巧,欢迎留言交流. 一.神奇的居中 经常看到有一些面试题问如何实现水平垂直居中,还要求用多种方法.唉唉唉!下面介绍一下我所知道的实现居中的方法. (1)父元素relative;子元素absolute,top:50%;left:50%;margin-left:-自己

请给出一个左侧定宽右侧自适应的HTML结构及样式

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>左右布局(左侧定宽,右侧自适应宽)</title><style type="text/css">body{font:12px arial;color:#000;b

三列自适应布局(左右定宽 中间自适应)

左右定中间自适应三列布局 1.绝对定位 2.浮动 3.flex 1 1.绝对定位 2 <!doctype html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>三栏布局</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 #main { 13 m