Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I_6 #6

Open
noopn opened this issue Aug 16, 2018 · 0 comments
Open

I_6 #6

noopn opened this issue Aug 16, 2018 · 0 comments

Comments

@noopn
Copy link
Owner

noopn commented Aug 16, 2018

左边固定右边自适应

<style>
.container div {height: 400px;position: relative;}
#left {width: 200px;position: absolute;left: 0; top: 0;background: red;}
#right {position: absolute; left: 200px;right: 0;top: 0;background: blue; }
</style>
<div class="container">
  <div id="left"></div>
  <div id="right"></div>
</div>
<style>
.container {padding-left: 200px}
.container div {height: 400px;position: relative;}
#left {width: 200px;position: absolute;left: 0; background: red}
#right {overflow: hidden;background: blue;}
</style>
<div class="container">
  <div id="left">1</div>
  <div id="right">2</div>
</div>
<style>
.container {display: table;width: 100%;}
.container div {height: 400px;display: table-cell}
#left {background: red;width: 200px;}
#right {background: blue;}
</style>
<div class="container">
  <div id="left">1</div>
  <div id="right">2</div>
</div>
<style>
.container {display: flex;}
.container div {height: 400px;}
#left {background: red;width: 200px}
#right {background: blue;flex-grow: 1}
</style>
<div class="container">
  <div id="left">1</div>
  <div id="right">2</div>
</div>

使用css3 calc() 配合以上的方法,

左右固定中间自适应

  1. 定位 同上
  2. felx 同上
<style>
.container {min-width: 400px}
.container div {height: 400px;}
#left {background: red;float: left;width: 200px}
#right {background: blue;float: right;width: 200px}
#center{background: green;}
</style>
<div class="container">
  <div id="left">1</div>
  <div id="right">2</div>
  <div id='center'>center</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant