search

Ray-56 / Daily

每日
7 stars 1 forks source link

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

Open GenXiaoLe opened 5 years ago

GenXiaoLe commented 5 years ago

尽可能说出你能想到的所有实现方式。

MMmaXingXing commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

也可以使用margin 为负值实现