一个div 里面有三个div 分别为左中右 如何 让右边的div 根据左中元素的内容的宽度 使右div 靠边距离16px

可以使用flex布局来实现这个效果。具体实现方式如下：

HTML代码：

<div class="container">
  <div class="left">左边的内容</div>
  <div class="middle">中间的内容</div>
  <div class="right">右边的内容</div>
</div>

CSS代码：

.container {
  display: flex;
  align-items: center;
}

.left {
  flex: 1;
}

.middle {
  flex: 1;
}

.right {
  margin-left: 16px;
}

这样就可以实现右边的div根据左中元素的内容的宽度，使右div靠边距离16px的效果。

相关问题

我有左中右三个div，左中div都是固定宽度，如何让右div铺满剩余宽度，并且固定

可以使用CSS中的flexbox来实现这个布局。首先，将父元素设置为flex容器，然后将左中div设置为固定宽度，右div设置为flex-grow: 1; 和flex-shrink: 0;，这样右div就会自动铺满剩余的宽度，并且不会缩小。

以下是示例代码：

HTML:

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

CSS:

.container {
  display: flex;
}

.left {
  width: 100px;
}

.middle {
  width: 200px;
}

.right {
  flex-grow: 1;
  flex-shrink: 0;
}

这样，右侧的div就会自动铺满剩余的宽度，并且不会缩小。

右侧div固定并且不被里面元素影响宽度

如果要让右侧div固定宽度，并且不被里面元素影响宽度，可以使用绝对定位的方法来实现。首先，将父元素设置为相对定位，然后将左中div设置为固定宽度，右div设置为绝对定位，并设置right属性为0和left属性为左中div的宽度。这样右div就会固定在父元素的右侧，并且不会受里面元素的影响。

以下是示例代码：

HTML:

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right">
    <p>这是右侧div的内容</p>
  </div>
</div>

CSS:

.container {
  position: relative;
}

.left {
  width: 100px;
  float: left; /* 添加浮动属性，防止影响后面元素 */
}

.middle {
  width: 200px;
  float: left; /* 添加浮动属性，防止影响后面元素 */
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 100px; /* 左边距为左侧div的宽度 */
  background-color: gray;
}

这样，右侧div就会固定宽度，并且不会被里面元素影响宽度。