Question

此图片应该是自我解释的。

基本上，我试图让div表现如下：

当有足够的空间让整个div显示时，整个div将显示，浮动到左侧。
当空间不足时，div应该隐藏在左侧。

如果CSS不能单独执行此操作，您是否有指向类似工作JS的链接？

JSFiddle，我正试图弄清楚：https://jsfiddle.net/375fmu1q/164/

<div class="outer-div">
    <div class="inner-div">
        <div class="part1">
            This is part 1 -
    </div>
        <div class="part2">
            This is part 2 -
    </div>
        <div class="part3">
            This is part 3 -
    </div>
        <div class="part4">
            This is part 4
    </div>
    </div>
</div>

Answer 1

您可以通过direction:rtl的一种方式执行此操作：参阅：Here

使用Flexbox

flex-flow: row-reverse;

body {margin:0;}
.outer-div {
  white-space:nowrap;
  overflow: hidden;
  display: flex;
  flex-flow: row-reverse;
  max-width: 400px;
}
.inner-div {
  display:flex;
}
.part {
  padding: 10px;
}
.part1 {
  background-color:red;
}
.part2 {
  background-color:blue;
}
.part3 {
  background-color:green;
}
.part4 {
  background-color:yellow;
}

<div class="outer-div">
  <div class="inner-div">     
    <div class="part part1">
    This is part 1 
    </div>  
    <div class="part part2">
    This is part 2 
    </div>  
    <div class="part part3">
     This is part 3 
    </div>  
    <div class="part part4">
    This is part 4 
    </div>
  </div>
</div>

Answer 2

您的问题有一种可能的解决方案。这需要CSS和JS才能工作。外部和内部div应具有以下理解：

.outer-div {
    position: relative;
    // padding-top: <height of .inner-div>
}
.inner-div {
    position: absolute;
    left: 0;
    top: 0;
}

这与float: left具有相同的效果。这是样式在正常大小期间应该如何工作，i：e .outer-div宽度大于.inner-div宽度。现在我们将编写一个JS代码来检测这个条件是否已经改变，并将差异应用为负数以实现所需的效果。

const onResizeOrDetectChange = () => {
    const outerDiv = document.querySelector('.outer-div');
    const innerDiv = document.querySelector('.inner-div');
    const widthDiff = outerDiv.offsetWidth - innerDiv.offsetWidth

    // will be less than 0 when outer div width is less than inner div width
    if (widthDiff < 0) {
        innerDiv.style.left = widthDiff + 'px'
    } else {
        innerDiv.style.left = 0
    }
}

在屏幕调整大小或您想要调整的任何事件时调用onResizeOrDetectChange，它可以产生您想要的效果。

这是修改过的小提琴：https://jsfiddle.net/o7m7bo60/8/。与float: left相比，我使用了flex-box样式，使.inner-div保持在一行

Answer 3

您可以使用display flex来解决此问题。请参阅下面的代码。这将解决您的问题。

.outer-div {
  white-space:nowrap;
}

.inner-div {
  display: inline-block;
  overflow:hidden;
  white-space:nowrap;
  display: flex;
  flex-wrap: wrap;
}
.inner-div > div {
  flex: 0 0 auto;
}

.part1 {
  display:inline-block;
  float:left;
  background-color:red;
  white-space:nowrap;
}
.part2 {
  display:inline-block;
  float:left;
  background-color:blue;
  white-space:nowrap;
}
.part3 {
  display:inline-block;
  float:left;
  background-color:green;
  white-space:nowrap;
}
.part4 {
  display:inline-block;
  float:left;
  background-color:yellow;
  white-space:nowrap;
}

<div class="outer-div">
  <div class="inner-div">     
    <div class="part1">
    This is part 1 -
    </div>  
    <div class="part2">
    This is part 2 -
    </div>  
    <div class="part3">
     This is part 3 -
    </div>  
    <div class="part4">
    This is part 4 
    </div> 
    <div class="part1">
    This is part 1 -
    </div>  
    <div class="part2">
    This is part 2 -
    </div>  
    <div class="part3">
     This is part 3 -
    </div>  
    <div class="part4">
    This is part 4 
    </div> 
    <div class="part1">
    This is part 1 -
    </div>  
    <div class="part2">
    This is part 2 -
    </div>  
    <div class="part3">
     This is part 3 -
    </div>  
    <div class="part4">
    This is part 4 
    </div> 
  </div>
</div>

CSS：Float left＆amp;溢出了

3 个答案: