Question

我有一个容器div和两个子div 一个子div将具有动态内容，因此宽度是动态的我希望另一个子div始终位于动态宽度div的右侧，并且即使动态内容div包含很多内容，该右侧div也不会超出父div，这意味着右侧div将停留在父级的右侧div，如果左div有很多内容。

示例：

+#container-----------------------------+
|+#left---+#right--+                    |
||        |        |                    |
||  Left. | Right. |                    |
||        |        |                    |                                                         
|+--------+--------+                    |
+---------------------------------------+

+#container-----------------------------+
|+#left-----------------------+#right--+|
||                            |        ||
||       too much Left...     | Right. ||
||                            |        ||                                                         
|+----------------------------+--------+|
+---------------------------------------+

我可以仅通过CSS来实现吗？如果没有，我该怎么办？

谢谢

Answer 1

当然可以。您可以在容器上使用flex并为有问题的孩子提供flex-basis属性，以使他们不会溢出容器

.container {
   width: 100%;
   height: 200px;
   display: flex;
}

.left {
   background: red;
   flex: 1 1 auto;
}

.right {
   background: green;
   flex: 1 1 auto;
   min-width: 5px;
}

<div class="container">
  <div class="left">
  hcbdycu gds7ycgyg cyg sycys vsty7vc7tysv t7cv s7tvc 7ts7c s7tc7vs7t
  </div>
  <div class="right">
  </div>
</div>

Answer 2

是的，您可以使用calc CSS function来实现。

请注意，300px中的calc(100% - 300px)是右div的“固定”宽度，这可以确保右div始终停留在父div的右侧，在本例中为容器div。

.container {
  display: flex;
  min-height: 100px;
}

.left {
  max-width: calc(100% - 300px);
  background: red;
}

.right {
  width: 300px;
  background: blue;
}

<div class='container'>
  <div class='left'>asdf asd asdf asdf asdf ads asddf asfsaf affasfas asfasf</div>
  <div class='right'></div>
</div>

将div定位到另一个具有动态宽度的div的右侧，并防止其离开屏幕

2 个答案: