Question

我有一列元素，每个元素都在前一个元素之下。我的代码的简化版本如下所示：

<div style="position: relative; height: 100%;">
   <div style="position: absolute;">Really long text here</div>
   <div style="position: absolute;">Not so long text here</div>
</div>

基本上，我的问题是，在较小的屏幕尺寸上，第一个内部div会溢出并进入第二个div的内容，并且两个div的文本会彼此重叠。

如何防止这种情况？我希望完整显示我的文本，但不允许其溢出到相邻的div中。

Answer 1

<head>    
 <style>
  #mainBox{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
  }
  #mainBox #box1{
   order: 1;
   align-self: flex-start;
   flex-basis: 60%; /*this is the width you wish the div to take*/
  }
  #mainBox #box2{
   order: 2;
   align-self: flex-start;
   flex-basis: 30%;
  }

  /*for smaller screens*/
  @media screen and (max-width: 520px){
    #mainBox{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
   }
  }
 </style>
</head>
<body>
 <div id="firstBox" style="position: relative; height: auto;">
  <div id="box1">Really long text here</div>
  <div id="box2">Not so long text here</div>
 </div>
</body>

有了这个，您将拥有一个响应式布局flexbox，上面有许多属性，现在它的2018年已有很多浏览器支持，它将为您节省很多时间。

Answer 2

position: absolute将限制您在这里，除非您想使用一些JavaScript。 position: relative的想法是元素会影响彼此的位置-绝对定位的元素不会。

您想到的两个最佳解决方案：

相对放置您的子元素，然后使用margin或transform: translate()来移动它们
使用javascript在彼此之间重新定位顺序元素。

CSS-堆叠的元素在较小的屏幕上彼此溢出

2 个答案: