Question

我有4个带有类.piece-slide的div，它在div #work内横向滚动页面，这是一个flex元素。在第三个.piece-slide div中，3个嵌套元素是绝对定位的，这会将第三个.piece-slide div的宽度呈现为0，所以现在我想以编程方式设置第三个.piece-slide的宽度div使其覆盖3个嵌套元素。

由于某种原因，我无法通过CSS设置此宽度。我也尝试过jQuery。如果有人指出我正确的方向如何纠正这一点，将不胜感激。这是jsfiddle以及下面的嵌入代码。

$("#third-div").outerWidth("100vw");

#wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex: 1;
}

#work {
  height: 100%;
  overflow-x: scroll;
  display: flex;
  background-color: red;
}

.piece-slide {
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 5em;
  box-sizing: border-box;
  border-right: 1px solid black;
}

.piece {
  width: 25vw;
  margin: 10px;
}

.piece img {
  max-width: 100%;
}

#third-div {
  /* D0ES NOT WORK */
  width: 100vw;
  background-color: green;
}

#third-div a {
  position: absolute;
}

#third-div a:nth-child(1) {
  top: 0;
  left: 0;
}

#third-div a:nth-child(2) {
  top: 25vw;
  left: 25vw;
}

#third-div a:nth-child(3) {
  left: 60vw;
}

<div id="wrapper">
  <div class="content">
    <div id="work">

      <div class="piece-slide">
        <a class="piece">
          <img src="https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png">
        </a>
      </div>

      <div class="piece-slide">
        <a class="piece">
          <img src="https://dummyimage.com/hd1080https://dummyimage.com/hd1080">
        </a>
        <a class="piece">
          <img src="https://dummyimage.com/hd1080https://dummyimage.com/hd1080">
        </a>
      </div>

      <!-- THIRD DIV WHERE WIDTH SHOULD BE SET  -->
      <div id="third-div" class="piece-slide">
        <a class="piece" num="1">
                  Nested Element 1<img src="http://i.stack.imgur.com/yZlqh.png">
              </a>
        <a class="piece" num="2">
                  Nested Element 2<img src="http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif">
              </a>
        <a class="piece" num="3">
                  Nested Element 3<img src="http://suplugins.com/podium/images/placeholder-02.jpg">
              </a>
      </div>
      <div class="piece-slide">
        <a class="piece">
          <img src="https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png">
        </a>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

尝试删除

</tbody></table>

来自flex-direction: column; 或者将其更改为

#wrapper

在flex容器中设置子div的宽度

1 个答案: