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.

Sign up for GitHub

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

Jump to bottom

第十四题：实现一个左边固定宽，右边自适应的左右布局 #14

Open
GenXiaoLe opened this issue Aug 26, 2019 · 3 comments
Open

第十四题：实现一个左边固定宽，右边自适应的左右布局 #14

GenXiaoLe opened this issue Aug 26, 2019 · 3 comments
Labels
CSS 层叠样式表

Comments

@GenXiaoLe
Copy link
Collaborator

尽可能说出你能想到的所有实现方式。
@GenXiaoLe GenXiaoLe added the CSS 层叠样式表 label Aug 26, 2019
@MMmaXingXing
Copy link

BFC实现

<body>
    <div class='content'>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

<style>
.content {
  overflow: hidden;
  width: 100%;
  border: 1px solid pink;
}
.left {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
.right {
  height: 100px;
  border: 1px solid red;
}
</style>

Flex实现

<body>
    <div class='content'>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

<style>
.content {
  display: flex;
  border: 1px solid pink;
}
.left {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
.right {
  flex: 1;
  height: 100px;
  border: 1px solid red;
}
</style>

float 布局

<body>
    <div class='content'>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

<style>
.content {
  width: 100%;
  border: 1px solid pink;
}
.left {
  width: 100px;
  height: 100px;
  float: left;
  background: blue;
}
.right {
  width: 100%;
  background: red;
  height: 100px;
}
</style>

calc 布局

<body>
    <div class='content'>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

<style>
* {
  margin: 0;
  padding: 0;
  font-size: 0;
}
.content {
  width: 100%;
  border: 1px solid pink;
}
.left {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: blue;
}
.right {
  width: calc(100% - 100px);
  background: red;
  display: inline-block;
  height: 100px;
}
</style>

@GenXiaoLe
Copy link
Collaborator Author

position布局

<body>
    <div class='outside'>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

<style>
.outside {
  width: 100%;
  height: 300px;
  position: relative;
}
.left {
  width: 100px;
  height: 100%;
  background: blue;
}
.right {
  position: absolute;
  left: 100px;
  right: 0;
  top: 0;
  bottom: 0;
  background: red;
}
</style>

@lamelamb
Copy link

也可以使用margin 为负值实现

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS 层叠样式表
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@MMmaXingXing @lamelamb @GenXiaoLe