实现如下页面布局。核心区域左侧自适应，右侧固定宽度 200p_阿里巴巴笔试题

汉堡鸡肉卷鸡腿鸡翅

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		header footer div{
			border: 1px solid red;
		}
		header{
			width: 100%;
			height: auto;
			border: 1px solid red;
			margin-bottom: 10px;
			position: relative;
		}
		.content{
			border: 1px solid blue;
		}
		.logo{
			height: 100px;
			width: 100px;
			float: left;
			border: 1px solid red;
			margin: 10px;
		}
		.user{
			position:absolute;
			height: 50px;
			width: 200px;
			float: right;
			border: 1px solid red;
			bottom: 10px;
			right: 10px;
		}
		.aside{
			float: right;
			width: 200px;
			border: 1px solid red;
			height: 100px;
			margin-left: 10px;
		}
		.clear{
			clear: both;
			line-height: 0;
			height: 0;
		}
		.content{
			height: 500px;
			border: 1px solid red;
			margin-right: 200px;
			float: left;
		}
		footer{
			width: 100%;
			height: 100px;
			border: 1px solid red;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<header>
		<div class="logo"></div>
		<div class="user"></div>
		<div class="clear"></div>
	</header>
	<div class="content">左侧内容</div>
	<div class="aside"></div>
	<div class="clear"></div>
	<footer></footer>
</body>
</html>

编辑于 2015-10-12 18:02:39 回复(3)

Mrniu

不明白为什么HTML中左侧右侧div必须得前后位置调换才可以呢，不能先左边后右边呢？？？

发表于 2015-08-18 10:56:49 回复(7)

燃情雪201904281453989

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>考基本布局和自适应双栏布局</title>
  <style>
    .header {
      width: 100%;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      border: 1px solid green;
      margin-bottom: 15px;
      box-sizing: border-box;
    }

    .logo {
      width: 100px;
      height: 100px;
      border: 1px solid blueviolet;
    }

    .cententCenter {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
    }

    .content {
      width: calc(100% - 230px);
      height: 400px;
      border: 1px solid brown;
    }

    .aside {
      width: 200px;
      height: 50px;
      border: 1px solid black;
    }

    .footer {
      width: 100%;
      height: 50px;
      border: 1px solid darkgrey;
    }
  </style>
</head>

<body>
  <div class="header">
    <div class="logo"></div>
    <input class="userName" placeholder="用户名" type="text">
  </div>
  <div class="cententCenter">
    <div class="content"></div>
    <div class="aside"></div>
  </div>
  <div class="footer"></div>
</body>

</html>

发表于 2019-11-08 11:29:41 回复(0)

lhmf

既然那么多人是用浮动和绝对定位来做的那我就来一个flex布局下的解题方案

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box{

display:flex;

flex-flow:column nowrap;

}

header,footer{

display: flex;

justify-content: space-between;

background-color: #ccc;

padding:10px;

}

.middle{

display:flex;

padding:10px;

}

.logo{

width:100px;

height:100px;

background-color: red;

}

.username{

width:100px;

height:40px;

background-color: red;

align-self: flex-end;

}

.content{

flex-grow:1;

background-color:yellow;

}

.aside{

width:100px;

height:200px;

background-color:#ccc;

}

</style>

</head>

<body>

</header>

</div>

</div>

</body>

</html>

发表于 2017-09-06 21:16:49 回复(0)

Mr.Apple

absolute+margin

<div id="main"> 主内容栏自适应宽度</div>

<div id="aside"> 侧边栏固定宽度</div>

</div>

#aside{

position:absolute;

top:0;

left|right:0;

width:200px;

}

#main{

margin-left|right:210px; // 参考侧边固定宽度

}

优点：

可任意调换位置

可主内容优先显示

缺点：

侧边无法撑开父元素的高度，会溢出父元素区域。

float+margin

<div id="aside"> 侧边栏固定宽度</div>

<div id="main"> 主内容栏自适应宽度</div>

</div>

#aside{

float:left|right;

width:200px;

}

#main{

margin-left|right:210px;// 参考侧边固定宽度

}

优点：

可任意调换位置

父元素自适应高度

缺点：

不支持主内容优先显示

float+-margin

<div id="main"> 主内容栏自适应宽度</div>

<div id="aside"> 侧边栏固定宽度</div>

</div>

#content{

padding-left:210px; // 参考侧边固定宽度

}

#main{

float:left;

width:100%;

}

#aside{

float:left;

position:relative;

width:200px;

left:-210px;// 等于包含块内补白

margin-left:-100%;

}

#content{

padding-right:210px; // 参考侧边固定宽度

}

#aside{

float:left;

position:relative;

width:200px;

right:-210px; // 等于包含块内补白

margin-left:-200px;

}

#main{

float:left;

width:100%;

}

编辑于 2016-08-18 10:27:16 回复(0)

方泉水很甜

html部分：

<!-- 头部 -->
  <header>
    <div class="logo">
      logo
    </div>
    <div class="username">
      用户名
    </div>
    <div class="clearfloat"></div>
  </header>
  <!-- 主要内容 -->
  <div class="wrap">
    <div class="content">
      content-自适应宽度
    </div>
    <aside>
      aside-宽度200px
    </aside>
    <div class="clearfloat"></div>
  </div>
  <!-- 页脚 -->
  <footer>
    footer
  </footer>

CSS部分（calc和vh兼容性不是很好）：

header{
  border:1px solid green;
}
.clearfloat{
  clear:both;
}
.logo{
  float:left;
  height:60px;
  width:60px;
  margin:10px;
  border:1px solid purple;
}

.username{
  float:right;
  margin-right:10px;
  margin-top:49px;
  width:120px;
  text-align:right;
  border:1px solid black;
}
.wrap{
  width:100%;
}
.content{
  border:1px solid blue;
  margin-top:10px;
  float:left;
  width:calc(100% - 220px);
  height:400px;
  height:calc(100vh - 150px);
}
aside{
  border:1px solid red;
  float:right;
  margin-top:10px;
  width:200px;
}

footer{
  border:1px solid black;
  margin-top:10px;
  text-align:center;
}

发表于 2016-03-17 16:05:05 回复(1)

小小

css:

body {
    margin: 0;
}
.fn-clear:after {
    content: " ";
    clear: both;
    display: block;
    font-size: 0;
    visibility: hidden;
    height: 0;
}
.fn-clear {
    zoom: 1;
}
.container {
    padding: 10px;
}
.header {
    background: #eee;
    position: relative;
    margin-bottom: 10px;
}
.logo {
    width: 100px;
    height: 100px;
    float: left;
    background: #f60;
}
.username {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.main {
    margin-bottom: 10px;
}
.side-bar {
    width: 200px;
    float: right;
    background: #ccc;
}
.content {
    margin-right: 200px;
    background: #f6f6f6;
}
.footer {
    background: #999;
}

html:

<div class="container">
        <div class="header fn-clear">
            <div class="logo">logo</div>
            <div
  class="username">zhoumingXXX@163.com</div>
        </div>
        <div class="main">
            <div
  class="side-bar">menu</div>
            <div class="content">左侧内容</div>
        </div>
        <div class="footer">
            footer
        </div>
</div>

发表于 2015-08-17 21:37:19 回复(0)

幻狐岚

<!DOCTYPE html>
<meta charset=utf-8>
<html>
<head>
	<title>alibaba</title>
	<style type="text/css">
		.header{
			overflow: hidden;
			margin: 5px;
			border: 1px solid #000;
			height: 70px;
		}
		.main{
			margin: 5px;
			overflow: hidden;
/*			border: 1px solid #000;*/
		}
		.footer{
			text-align: center;
			margin: 5px;
			border: 1px solid #000;
		}
		.logo{
			width: 50px;
			height: 50px;
			float: left;
			margin: 10px;
			border: 1px solid #000;
		}
		.username{
			border: 1px solid #000;
			float: right;
			width: 140px;
			height: 20px;
			margin-top: 40px;
			margin-right: 10px;
			text-align: right;
		}
		.column{
			border: 1px solid #000;
		}
		.left{
			float: left;
			width: 100%;
			
		}
		.right{
			float: left;
			width: 200px;
			margin-left: -204px;
		}
		.real{
			margin-right: 210px;
			border: 1px solid blue;
			height: 300px;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="logo">logo</div>
		<div class="username">用户名</div>
	</div>
	<div class="main">
		<div class="left column">
			<div class="real">content - 自适应宽度</div>
		</div>
		<dis class="right column">aside - 定宽200px</div>
	</div>
	<div class="footer">footer</div>
</body>
</html>

参考了淘宝的双飞翼布局，column类均左浮动，侧边栏aside通过负值左外边距得以和left column共处一行，而真正的自适应内容则放置在left column的内部，使用右外边距得以和right column保持固定距离

编辑于 2015-09-15 16:15:54 回复(11)

聪聪的忧伤0713

<!DOCTYPE html>

<head>

<title>静态UI还原</title>

</head>

<style>

body {

margin: 0;

padding: 0;

height: 100vh;

width: 100vw;

display: flex;

flex-direction: column;

}

.header {

height: 100px;

padding: 5px;

display: flex;

justify-content: space-between;

}

.header .logo {

width: 100px;

height: 100px;

background-color: pink;

}

.header .username {

align-self: flex-end;

background-color: aqua;

}

.main {

flex: 1;

/* height: calc(100% - 160px); */

margin-top: 5px;

display: flex;

background-color: pink;

}

.main .content {

height: 100%;

flex: 1;

background-color: chartreuse;

}

.main .aside {

width: 200px;

height: 100%;

background-color: blueviolet;

}

.footer {

width: 100%;

height: 60px;

background-color: skyblue;

}

</style>

<body>

<div class="username">username</div>

</header>

</main>

<footer class="footer"> Footer</footer>

</body>

</html>

发表于 2024-04-16 21:32:44 回复(0)

牛客189458546号

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
}
.left-side {
flex-grow: 1;
background-color: #f8f8f8;
}
.right-side {
width: 200px;
background-color: #ddd;
}
</style>
</head>
<body>

<div class="container">
<div class="left-side">

左侧自适应内容区域
</div>
<div class="right-side">

右侧固定宽度200px区域
</div>
</div>

</body>
</html>

发表于 2024-03-27 21:26:54 回复(0)

北城以北123

以前都是这么送分的吗😭

发表于 2023-05-22 23:02:33 回复(0)

maple_幸会

.page{

.header{

width:100%;

height: 50px;

padding:5px;

position: relative;

.logo{

width:30px;

height:30px;

}

.username{

position: absolute;

bottom: 5px;

right:-100px;

}

.body{

.content{

width: auto;

}

.aside{

width:200px;

}

.footer{

width: 100%;

height:20px;

text-align: center;

}

发表于 2019-02-08 21:03:24 回复(0)

段凯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> body,html { height:calc(100% - 16px); width: calc(100% - 16px);
        } header { height: 150px; border: 1px black solid;
        }
        .middle { height: calc(100% - 250px);
        }
        .content { float: right; width: 200px; height: 100%; background-color: #00FFD1;
        }
        .aside { height: 100%; margin-right: 200px; background-color: deeppink;
        } footer { height: 50px; border: 1px black solid;
        } </style>
</head>
<body>
<header><img class="logo" alt="logo"></header>
<div class="middle">
    <div class="content"></div>
    <div class="aside"></div>
</div>
<footer></footer>
</body>
</html>

发表于 2018-09-01 14:29:14 回复(0)

alexwjj


	
	
		<!DOCTYPE html>
	

	
		<html lang="en">
	

	
		<head>
	

	
		<meta charset="UTF-8">
	

	
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	

	
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
	

	
		<title>Document</title>
	

	
		</head>
	

	
		<style>
	

	
		.header{
	

	
		width: 90%;
	

	
		height: 100px;
	

	
		margin: 0 auto;
	

	
		border: 1px solid greenyellow;
	

	
		}
	

	
		.header .logo{
	

	
		width: 50px;
	

	
		height: 50px;
	

	
		border: 1px solid red;
	

	
		margin-top: 25px;
	

	
		}
	

	
		.header .user{
	

	
		width: 100px;
	

	
		height: 30px;
	

	
		float: right;
	

	
		border: 1px solid black;
	

	
		margin-top: 50px;
	

	
		}
	

	
		.content{
	

	
		width: 90%;
	

	
		
	

	
		margin: 0 auto;
	

	
		}
	

	
		.content .content-left{
	

	
		
	

	
		height: 300px;
	

	
		border: 1px solid blue;
	

	
		margin-right: 210px;
	

	
		}
	

	
		.content .content-right{
	

	
		width: 200px;
	

	
		float: right;
	

	
		border: 1px solid rebeccapurple;
	

	
		
	

	
		}
	

	
		.footer{
	

	
		width: 90%;
	

	
		height: 50px;
	

	
		margin: 0 auto;
	

	
		border: 1px solid black;
	

	
		}
	

	
		</style>
	

	
		<body>
	

	
		
	

	
		<div class="header">
	

	
		<div class="user">用户名</div>
	

	
		<div class="logo">logo</div>
	

	
		
	

	
		</div>
	

	
		<div class="content">
	

	
		<div class="content-right">aside-定宽200px</div>
	

	
		<div class="content-left">content-自适应宽度</div>
	

	
		
	

	
		</div>
	

	
		<div class="footer">footer</div>
	

	
		
	

	
		</body>
	

	
		</html>

发表于 2018-08-25 17:40:08 回复(0)

Willon_

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

*{

margin: 0;

padding: 0;

}

body{

color: #333;

}

div{

border: 1px solid #333;

}

.header{

height:80px;

padding: 15px;

text-align: right;

}

.logo{

width:60px;

height:60px;

text-align: center;

}

input{

margin-top:50px;

}

.main{

display: flex;

height: 450px;

padding: 5px;

}

.content{

flex: 1;

height: inherit;

}

.aside{

width:200px;

height:inherit;

}

.f-left{

float: left;

}

.f-right{

float: right;

}

.footer{

padding: 10px;

text-align: center;

}

</style>

</head>

<body>

</div>

</div>

<div class="footer">footer</div>

</body>

</html>

发表于 2018-08-11 22:12:46 回复(0)

空桑201804151404670

说好的自适应宽度呢怎么变成用margin-right来控制了那个自适应我想了好久还百度了都被不知道怎么处理

css：

.top{

width: 100%;

height: 100px;

border:5px solid green;

float:left;

}

.top .top_logo{

width:60px;

height: 60px;

margin-top:20px;

margin-left:20px;

border: 2px solid ;

float:left;

}

.top .top_user{

width:150px;

height:30px;

border:2px solid red;

margin-left:80%;

margin-top:60px;

float: left;

}

.index{

width:100%;

height:310px;

float: left;

margin-top: 10px;

}

.index .content{

height: 300px;

border: 2px solid red;

margin-right: 204px;

}

.index .content_right{

width:200px;

height:300px;

border: 2px solid red;

right:100px;

float:right;

}

.footer{

width:100%;

height:30px;

border:2px solid green;

float:left;

margin-top:10px;

}

html：

</div>

</div>

</div>

发表于 2018-05-27 13:28:18 回复(0)

垚的彼岸

<!doctype html>
<html>
<head>
<meta charset="utf-8" >
<style>
    *{
        padding:0;
        margin:0;
    }
    #head{
       display:flex;
       padding:10px;
       background:red;
       align-items:flex-end;
       justify-content:space-between;
    }
    #user{
        
    }
    #main{
        height:400px;
        display:flex;
        flex-direction:row-reverse;
        background:blue;
    }
    #aside{
        background:yellow;
        width:200px;
    }
    #footer{
        padding:10px;
        background:#ccc;
    }
</style>
</head>
<body> <header id="head">  <span><img src="log.jpg" alt="logo图片"/></span> <span id="user">用户名</span> </header>
<div id="main">
<section id="content">
 
</section>
<aside id="aside">
 
</aside>
</div>
<footer id="footer">
 
</footer> </body>
</html>

发表于 2018-05-26 16:38:04 回复(0)

北纬36

body {
    margin: 0;
}
.fn-clear:after {
    content: " ";
    clear: both;
    display: block;
    font-size: 0;
    visibility: hidden;
    height: 0;
}
.fn-clear {
    zoom: 1;
}
.container {
    padding: 10px;
}
.header {
    background: #eee;
    position: relative;
    margin-bottom: 10px;
}
.logo {
    width: 100px;
    height: 100px;
    float: left;
    background: #f60;
}
.username {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.main {
    margin-bottom: 10px;
}
.side-bar {
    width: 200px;
    float: right;
    background: #ccc;
}
.content {
    margin-right: 200px;
    background: #f6f6f6;
}
.footer {
    background: #999;
}

发表于 2018-03-29 09:20:39 回复(0)

Galina_Lin

<!DOCTYPE html>
<html lang="en">
<head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css">         header{             overflow: hidden;             border: 1px solid #0f0;             padding: 5px;             margin: 5px;         }         .logo{             float: left;             height: 50px;             width: 50px;             border: 1px solid #f00;         }         .user{             float: right;             height: 20px;             width: 100px;             margin-top: 30px;             border: 1px solid #000;         }         article{             height: 500px;             border: 1px solid #00f;             margin: 5px;             margin-right: 250px;         }         aside{             float: right;             width: 200px;             border: 1px solid #f00;         }         footer{             text-align: center;             margin: 5px;             border: 1px solid #000;         }     </style>
</head>
<body>     <header>         <div class="logo">Logo</div>         <div class="user">用户名</div>     </header>     <main>         <aside>aside-定宽200px</aside>         <article>content-自适应宽度</article>     </main>     <footer>footer</footer>
</body>
</html>

发表于 2018-03-22 13:16:58 回复(0)

优雅1217

<style>

header{height:50px;padding: 5px; border: 1px solid green;}
header .logo{float: left; height: 50px; line-height: 50px;}
header .logo img{fwidth: 30px; height: 30px; border: 1px solid red;}
header .logo h1{text-indent: -999em;}
header .username{float: right; padding-top: 27px;}
.main{ display: flex; margin:10px 0; height: 500px; width:100%}
content{flex: 1; height: 100%; margin-right: 20px; border: 1px solid blue;}
aside{width: 200px; height: 100%; border: 1px solid red;}
footer{height: 20px;border: 1px solid #000;}

</style>

</div>

用户名

</div>

</header>

content-自适应宽度

</content>

<aside>

aside-定宽200px

</aside>

</div>

footer

</footer>

发表于 2018-03-19 21:40:16 回复(0)

实现如下页面布局。核心区域左侧自适应，右侧固定宽度 200p

问题信息

热门推荐

相关试题