首页 > 试题广场 > 实现如下页面布局。核心区域左侧自适应,右侧固定宽度 200px
[问答题]
实现如下页面布局。核心区域左侧自适应,右侧固定宽度 200px

53个回答

添加回答
<!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 回复(10)
<!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 回复(2)
不明白为什么HTML中左侧右侧div必须得前后位置调换才可以呢,不能先左边后右边呢???
发表于 2015-08-18 10:56:49 回复(7)
既然那么多人是用浮动和绝对定位来做的  那我就来一个flex布局下的解题方案

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<div class="box">
   <header>
       <div class="logo"></div>
       <div class="username"></div>
   </header>
   <div class="middle">
       <div class="content"></div>
       <div class="aside"></div>
   </div>
   <footer> </footer>
</div>
</body>
</html>
发表于 2017-09-06 21:16:49 回复(0)

absolute+margin

<div id="content">

    <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="content">

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

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

</div>

#aside{

    float:left|right;

    width:200px;

}

#main{

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

}

优点:

可任意调换位置

父元素自适应高度

缺点:

不支持主内容优先显示

float+-margin

<div id="content">

    <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>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        header{
            min-height: 150px;
            width:100%;
            border:2px solid green;
        }
        .logo{
            width:100px;
            height: 100px;
            margin:20px;
            border:2px solid pink;
            float: left;
        }
        .name{
            width:200px;
            height: 30px;
            border:2px solid #186869;
            float: right;
            margin-top: 100px;
            margin-right: 10px;
            text-align: right;
        }
        .container{
            padding-right:200px;
        }
        .content,aside{
            float: left;
            height: 200px;
            position: relative;
        }
        .content{
            background:#999;
            width:100%;
        }
        aside{
            width:200px;
            background:#618481;
            margin-left:-200px;
            right:-200px;
        }
        footer{
            height: 200px;
            width: 100%;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            border:4px solid #486;
            clear: both;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">logo</div>
        <div class="name">name</div>
    </header>
    <div class="container">
        <div class="content">content</div>
        <aside>aside</aside>
    </div>
    <footer>footer</footer>
</body>
</html>
圣杯布局,参考http://www.cnblogs.com/star91/p/5773436.html
发表于 2017-09-20 22:33:33 回复(0)
<!Doctype html>
<html>
<head>
    <title>adaptive</title>
   <style>
        header{
            height:80px;
            padding:8px 5px;
        }
        #logo{
            display:inline-block;
            width:80px;
            height:80px;
           border:1px solid green;     }
        #username{
            width:100px;
            border:1px solid blue;
            line-height:30px;
            float:right;
            margin-top:50px;
        }
        #logo img{
            width:100%;
        }
        #c-left{
            width:100%;
            overflow:hidden;
            height:600px;
            border:1px solid red;
        }
        #c-right{
            width:200px;
            float:right;
            height:30px;
            border:1px solid pink;
        }
        #footer{
            height:100px;
        }
    </style>
</head>
<body>
    <header>
        <a href='#' id='logo'>
            <img src="#" alt='logo'/>
        </a>
        <p id='username'>用户名</p>
    </header>
   <div id='content'>
        <div id='c-left'>
            
        </div>
        <div id='c-right'></div>
    </div>
   <footer>
        
    </footer>
</body>
</html>

发表于 2017-08-07 21:17:53 回复(0)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            position: relative;
            width: 100%;
        }
        .top, .core, .bottom {
            width: 90%;
            position: relative;
            margin: auto;
            margin-top: 10px;
            margin-bottom: 10px;
            box-sizing: border-box;
            text-align: center;
        }
        .top {
            height: 100px;
            border: 1px solid green;
            padding: 10px;
        }
        .core {
            height: 300px;
            background-color: #fefefe;
            padding-right: 220px;
        }
        .bottom {
            height: 50px;
            border: 1px solid black;
        }
        .top .logo {
            width: 80px;
            height: 80px;
            border: 1px solid grey;
            float: left;
        }
        .top .username {
            width: 80px;
            height: 50px;
            border: 1px solid red;
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .core .content {
            width: 100%;
            height: 100%;
            border: 1px solid yellow;
        }
        .core .aside {
            width: 200px;
            border: 1px solid red;
            position: absolute;
            right: 10px;
            top: 0px;
        }
        .bottom .footer {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class = "top">
        <div class="logo">LOGO</div>
        <div class="username">USERNAME</div>
    </div>
    <div class = "core">
        <div class="content">CONTENT</div>
        <div class="aside">ASIDE</div>
    </div>
    <div class = "bottom">
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>
发表于 2017-08-01 16:37:47 回复(0)
<div class="main">
<div class="left">
<div class="content"></div>
</div>
<div class="aside"></div>
</div>
.main{overflow:hidden;}
.main div{height:300px;}
.left{float:left; width:100%; position:relative;}
.content{ margin-right:200px;}
.aside{float:left; margin-left:-200px; width:200px;}
发表于 2017-07-26 22:28:54 回复(0)
<!DOCTYPE html>
< html lang="en" >
< head >
< title ></ title >
< meta charset="UTF-8" >
< meta name="viewport" content="width=device-width, initial-scale=1" >
< style >
header{
position: relative;
}
header::after, div.main::after{
display: block;
content:'';
clear: both;
}
div.logo{
float:left;
}
div.user-name{
position: absolute;
right:0;
bottom: 0;
}
div.main{
position:relative;
}
div.main div.content{
position: absolute;
left:0;
right:200px;
}
div.aside{
width:200px;
float:right;
}
< / style >
</ head >
< body >
< header >
< div class="logo" >
</ div >
< div class="user-name" >
</ div >
</ header >
< div calss="main" >
< div class="content" >
</ div >
< div class="aside" >
</ div >
</ div >
< footer >
</ footer >
</ body >
</ html >
发表于 2017-07-03 18:24:15 回复(0)
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> *{ margin: 0; padding: 0;} header{ position: relative; border:1px solid green; overflow: hidden;
        }
        .logo{ float: left; height: 50px; border:1px solid red; margin: 10px;
        }
        .user{ position: absolute; right:0; bottom: 0; border:1px solid purple; vertical-align: bottom; text-align: right; margin: 10px;
        }
        .wrapper{ position: relative; overflow: hidden; padding-top: 10px;}
        .aside{ position: absolute; right: 0; top: 10px; width: 200px; border: 1px solid red;
        }
        .content{ border:1px solid purple; margin-right:220px; height: 200px;
        } footer{ margin-top: 10px; text-align: center; border:1px solid #000;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">Logo</div>
        <div class="user">用户名</div>
    </header>
    <div class="wrapper">
        <div class="content">content-自适应宽度</div>
        <div class="aside">aside-定宽200px</div>
    </div>
    <footer>footer</footer>
</body>
</html>

发表于 2017-03-20 12:16:35 回复(0)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex</title>
  <style>
   *{box-sizing: border-box;}
   body,html{
    margin:0;
    width:100%;
    height: 100%;
    padding:8px;
   }
  .header,.footer{margin:10px 0;}
  .header{
    padding:8px;
    position: relative;
   }
  .header .logo{
    width:100px;
    height: 100px;
   }
   .header .username{
    position: absolute;
    width:100px;
    text-align:right;
    right:8px;
    bottom:8px;
  }
  .content{
    height: 400px;
    margin-right:230px;
  }
  .aside{
    width:200px;
    float:right;
  }
  .footer{
    height: 25px;
    text-align:center;
  }
  .borBack{border:1px solid black;}
    </style>
</head>
<body>
  <div class="header borBack">
    <div class="username borBack">用户名</div>
    <div class="logo borBack">Logo</div>
  </div>
  <div class="aside borBack">aside-定宽 200px </div>
  <div class="content borBack">Content-自适应宽度</div>
  <div class="footer borBack">footer</div>
</body>
</html>
编辑于 2017-03-16 14:26:39 回复(0)
<!DOCTYPE html> <html> <head lang="en">  <meta charset="UTF-8">  <title></title>  <style>  *{ padding: 0;  margin: 0;  } html,body{ height: 100%;  width: 100%;  }
        .wrapper{ margin: 10px 10px 0px 10px ;  }
        .logo{ width: 50px;  height: 50px;  margin: 10px 0px 10px 10px;  border: 1px solid red;  float: left;  } header{ width: 100%;  height: 70px;  border: 2px solid green;  }
        .user{ width: 100px;  border: 1px solid #000000;  text-align: right;  float: right;  margin-top:40px;  margin-right: 4px;  }
        .content{ margin-top:10px;  width: 100%;  height: 500px;  display: flex;  }
        .left{ height: 100%;  border: 1px solid red;  flex: 1;  }
        .right{ width: 200px;  margin-left: 10px;  height:20px;  border: 1px solid red;  flex: none;  } footer{ width: 100%;  height: 20px;  border: 1px solid red;  margin-top:10px;  } </style> </head> <body> <div class="wrapper">  <header>  <div class="logo">  Logo </div>  <div class="user">  用户名 </div>  </header>  <div class="content">  <div class="left">  content-自适应宽度 </div>  <div class="right">  aside-定宽200 </div>  </div>  <footer>   </footer> </div>  </body> </html>
发表于 2017-03-13 22:29:29 回复(0)
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		header{
			height: 80px;
			margin: 5px;
			border:1px solid green;
			position: relative;
		}
		.logo{
			width:70px;
			height: 70px;
			margin: 4px;
			border: 1px solid red;
		}
		.userinfo{
			position: absolute; 
			bottom: 5px; 
			right: 20px;
			border: 1px solid black;
			width:100px;
			height: 20px;
			text-align: right;
		}
		.main-content{			
			width: 100%;
		}		
		.left{
			margin:5px ;
			/* width: 80%; */
			height:400px;
			position: absolute;
			right: 220px;		
			left:5px;	
			border: 1px solid blue;
		}
		.right{
			margin:5px ;
			width: 200px;
			height:400px;
			float:right;
			border: 1px solid red;
		}
		footer{
			margin-top:5px;
			height: 30px;
			border: 1px solid black;
		}
		div#clear{
			border: none;
			clear: both;
		}
	</style>
</head>
<body>
	<header>
		<div class="logo">logo</div>
		<div class="userinfo">用户名</div>
	</header>
	<div class="main-content">		
		<div class="left">content</div>	
		<div class="right">aside</div>
	</div>	
	<div id="clear"></div>
	<footer>footer</footer>
</body>
</html>

发表于 2017-03-10 14:46:08 回复(0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#container {
border: 1px solid #ccc;
padding: 10px;
}
#header {
padding: 10px;
border: 1px solid green;
overflow: hidden;
position: relative;
}
#header .logo {
width: 50px;
height: 50px;
border: 1px solid red;
float: left;
}
#header .username {
width: 150px;
border: 1px solid purple;
text-align: right;
position: absolute;
bottom: 10px;
right: 10px;
}
#main {
margin-top: 10px;
margin-bottom: 10px;
}
#main .content {
border: 1px solid purple;
margin-right: 220px;
height: 500px;
}
#main .aside {
width: 200px;
border: 1px solid red;
float: right;
}
#footer {
text-align: center;
border: 1px solid #000;
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<header id="header">
<div class="logo">Logo</div>
<div class="username">用户名</div>
</header>
<main id="main">
<aside class="aside">aside</aside>
<div class="content">content</div>
</main>
<footer id="footer">footer</footer>
</div>
</body>
</html>
发表于 2017-02-12 01:12:19 回复(0)
div.container
    div.header
         a>img
             span
    div.content-wrap
        div.content
        div.aside
    div.footer

发表于 2017-02-10 20:45:17 回复(0)
<html>
<head>
	<title>两列布局--右侧定宽左侧自适应</title>
<style type="text/css">
	body{
		margin: 0;
		padding: 0;
	}
	#header{
		width: 100%;
		height: 18%;
		border: green 1px solid;
		margin-bottom: 1%;
	}
	#logo{
		width: 80px;
		height: 80px;
		border: red 1px solid;
		float: left;
		margin-top: 20px;
		margin-left: 20px;
	}
	#username{
		width: 200px;
		height: 30px;
		border: black 1px solid;
		float: right;
		margin-top: 75px;
		margin-right: 20px;
		text-align: right;
	}

	#main{
		overflow: hidden;
	}
	#content{
		height: 600px;
		border: blue 1px solid;
		margin-right: 240px;
	}
	#aside{
		width: 200px;
		height: 30px;
		border: red 1px solid;
		float: right;
	}

	#footer{
		width: 100%;
		height: 9%;
		border: black 1px solid;
		clear: both;
		margin-top: 1%;
	}
</style>
</head>

<body>
	<div id="header">
		<div id="logo">Logo</div>
		<div id="username">用户名</div>
	</div>
	<div id="main">
		<div id="aside">aside</div>
		<div id="content">content</div>
	</div>
	<div id="footer">footer</div>
</body>
</html>


发表于 2016-12-20 16:28:00 回复(0)
css:
    body:{
        margin:0;
}
    .fn-clear after{
    content:"";
    clear:both;
    dispaly:block;
    font-size:0;
    visibility:hidden;
    hight: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>
发表于 2016-09-07 15:25:33 回复(0)
牛客网,程序员必备求职神器
QQ群:169195721
微 信:www_nowcoder_com 关注
微 博:牛客网 关注

扫一扫,把题目装进口袋