Question

我有一些CSS问题，希望有人可以提供帮助。我基本上试图设置一组向内滑动的内联div，扩展到包含它们的父div的宽度。正如您从jsfiddle（https://jsfiddle.net/0o9bw101/）中看到的那样，div扩展到父div的宽度，而不是仅扩展到父div的最右边界。如果有人可以提供帮助，我会非常感激。提前谢谢！

以下是我想用的CSS：

.container {
  width: 70%;
  height: 100px;
  background-color: black;
}

.greyDiv {
    height: 60px;
    width: 60px;
    background-color: white;
    border-radius: 5px;
    color: white;
    display: inline-block;
    margin: 20px;
    vertical-align: top;
    color: black;
}

.greyDiv:hover {
  transition: 2s;
  width: 70%;
  position: absolute
}

Answer 1

试试这个

 .container {
  width: 70%;
  height: 100px;
  background-color: black;
  position:relative;
  overflow:hidden;
}

.greyDiv {
    height: 60px;
    width: 60px;
    background-color: white;
    border-radius: 5px;
    color: white;
    display: inline-block;
    margin: 20px;
    vertical-align: top;
}

.greyDiv:hover {
  transition: 2s;
  width: 100%;
  position: absolute;
}

<div class='container'>
  <div class='greyDiv'></div>
  <div class='greyDiv'></div>
  <div class='greyDiv'></div>
  <div class='greyDiv'></div>
</div>

Answer 2

编辑：

诀窍是在主容器内添加另一个盒子。

DEMO ：https://jsfiddle.net/0o9bw101/3/

<div class='container'>
  <div class='invisible_container'>  
    <div class='greyDiv'></div>
    <div class='greyDiv'></div>
    <div class='greyDiv'></div>
    <div class='greyDiv'></div>
  </div>  
</div>

上一个回答：

当你将父母与％in与px中的子边距混合时，很难做到。将父母的位置设置为默认值以外的其他位置也会有所帮助。

以下是您的工作示例：

.container {
  width: 70%;
  height: 100px;
  background-color: black;
  position: absolute;
}

.greyDiv {
    height: 60px;
    width: 60px;
    background-color: white;
    border-radius: 5px;
    color: white;
    display: inline-block;
    margin: 20px;
    margin-left: 2%;
    vertical-align: top;
}

.greyDiv:hover {
  transition: 2s;
  width: 96%;
  position: absolute
}

DEMO：https://jsfiddle.net/0o9bw101/2/

Answer 3

这可能不是你想要的，但是这里的元素将增长到容器的整个宽度（从左到右），无论它的起始位置如何，每个对象使用2个额外的元素。

.inner用于将背景增加到全宽

.placeholder用于防止其他元素向左折叠

@keyframes grow {
    from {width: 0%;}
    to {width: 92%;}
}

.container {
  width: 70%;
  height: 100px;
  position: relative;
  background-color: black;
}

.greyDiv {
    height: 60px;
    width: 60px;
    background-color: white;
    border-radius: 5px;
    color: black;
    display: inline-block;
    margin: 20px 4%;
    vertical-align: top;
    position: relative;
    z-index: 2;
}

.inner {
  width: 0%;
  height: 100%;
  display: none;
  background-color: transparent;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.placeholder {
    display: none;
    background-color: transparent;
    height: 60px;
    width: 60px;
    margin: 20px 4%;
}

.greyDiv:hover {
  width: 100%;
  position: absolute;
  left: 0;
  margin: 20px 0;
  background-color: transparent;
  z-index: 4;
}

.greyDiv:hover + .placeholder {
  display: inline-block;
}

.greyDiv:hover .inner {
  display: inline-block;
  left: 4%;
  width: 100%;
  background-color: white;
  animation-name: grow;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  z-index: 5;
}

<div class='container'>
  <div class='greyDiv'>1a<div class="inner">1x</div></div><div class="placeholder"></div>
  <div class='greyDiv'>2a<div class="inner">2x</div></div><div class="placeholder"></div>
  <div class='greyDiv'>3a<div class="inner">3x</div></div><div class="placeholder"></div>
  <div class='greyDiv'>4a<div class="inner">4x</div></div><div class="placeholder"></div>
</div>

CSS：将div向右滑动到父div的宽度

3 个答案: