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

BFC实现 <div class="snippet-clipboard-content notranslate position-relative overfl

position布局 <div class="highlight highlight-text-html-basic notranslate position-

第十四题：实现一个左边固定宽，右边自适应的左右布局 about daily HOT 3 OPEN

ray-56 commented on June 22, 2024

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

from daily.

Comments (3)

MMmaXingXing commented on June 22, 2024

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>

from daily.

GenXiaoLe commented on June 22, 2024

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>