代码之家  ›  专栏  ›  技术社区  ›  Razvan Zamfir

使子元素伸展父元素宽度的三分之一(在传送带中)

  •  1
  • Razvan Zamfir  · 技术社区  · 7 年前

    我正在处理一种(类似)旋转木马,项目水平对齐。

    每个子元素(大约有十几个)都应该拉伸 三分之一 父级的宽度。一次应能看到三个项目。

    我使用了引导4和一些自定义的CSS。不需要Javascript,旋转木马依靠手动滚动来显示其项目。

    设置 width: 33.333% 因为列表项不适用于非常小或非常大的分辨率,如您所见。我还想把这些东西拉伸一下 超小分辨率的全宽 .

    什么是可行的、特定于flex box的备选方案?

    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
    }
    
    .page-wrapper {
      min-height: 100%;
    }
    
    .hero {
      height: 100vh;
      background: #212121;
      justify-content: center;
      align-items: center;
    }
    
    #carousel {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow-x: scroll;
      justify-content: left;
      align-items: center;
    }
    
    #carousel li {
      padding: 0 0 70px 0;
      width: 33.333%;
    }
    
    #carousel li a {
      text-decoration: none;
      color: #fff;
    }
    
    #carousel li img {
      display: block;
      width: 100%;
    }
    
    #carousel li .caption {
      padding-top: 20px;
    }
    
    #carousel li h2 {
      font-size: 20px;
      line-height: 1;
      margin: 0;
      padding: 0;
    }
    
    #carousel li p {
      font-size: 10px;
      padding: 0;
      margin: 5px 0 0 0;
    }
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
    <div class="page-wrapper">
      <div class="hero d-flex">
        <ul id="carousel" class="d-flex">
          <li class="col-md-4">
            <a href="#"><img src="https://placeimg.com/300/200/people" alt="">
              <div class="caption">
                <h2>Lorem ipsum dolor</h2>
                <p>A true story</p>
              </div>
            </a>
          </li>
          <li class="col-md-4">
            <a href="#"><img src="https://placeimg.com/300/200/nature" alt="">
              <div class="caption">
                <h2>Lorem</h2>
                <p>Lorem ipsum dolor sit amet, consectetur</p>
              </div>
            </a>
          </li>
          <li class="col-md-4">
            <a href="#"><img src="https://placeimg.com/300/200/arch" alt="">
              <div class="caption">
                <h2>My neighborhood</h2>
                <p>Lorm ipsum dolor</p>
              </div>
            </a>
          </li>
          <li class="col-md-4">
            <a href="#"><img src="https://placeimg.com/300/200/animals" alt="">
              <div class="caption">
                <h2>Into the wild</h2>
                <p>Lorem ipsum dolor sit amet, consectetur</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    3 回复  |  直到 7 年前
        1
  •  1
  •   Nandita Sharma    7 年前

    添加 col-4 类而不是col-md-4。对于屏幕的所有分辨率,这将使DIV的宽度保持在33.3%。

    html, body {
      padding: 0;
      margin: 0;
      height: 100%;
    }
    .page-wrapper {
      min-height: 100%;
    }
    .hero {
      height: 100vh;
      background: #212121;
      justify-content: center;
      align-items: center;
    }
    #carousel {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow-x: scroll;
      justify-content: left;
      align-items: center;
    }
    #carousel li {
      padding: 0 0 70px 0;
    }
    #carousel li a {
      text-decoration: none;
      color: #fff;
    }
    #carousel li img {
      display: block;
      width: 100%;
    }
    #carousel li .caption {
      padding-top: 20px;
    }
    #carousel li h2 {
      font-size: 20px;
      line-height: 1;
      margin: 0;
      padding: 0;
    }
    #carousel li p {
      font-size: 10px;
      padding: 0;
      margin: 5px 0 0 0;
    }
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="page-wrapper">
      <div class="hero d-flex">
        <ul id="carousel" class="d-flex">
          <li class="col-4">
            <a href="#"><img src="https://placeimg.com/300/200/people" alt="">
            <div class="caption">
              <h2>Lorem ipsum dolor</h2>
              <p>A true story</p>
            </div>
            </a>
          </li>
          <li class="col-4">
            <a href="#"><img src="https://placeimg.com/300/200/nature" alt="">
            <div class="caption">
              <h2>Lorem</h2>
              <p>Lorem ipsum dolor sit amet, consectetur</p>
            </div>
            </a>
          </li>
          <li class="col-4">
            <a href="#"><img src="https://placeimg.com/300/200/arch" alt="">
            <div class="caption">
              <h2>My neighborhood</h2>
              <p>Lorm ipsum dolor</p>
            </div>
            </a>
          </li>
          <li class="col-4">
            <a href="#"><img src="https://placeimg.com/300/200/animals" alt="">
            <div class="caption">
              <h2>Into the wild</h2>
              <p>Lorem ipsum dolor sit amet, consectetur</p>
            </div>
            </a>
          </li>
        </ul>
      </div>
    </div>

    编辑 评论中的问题(工作答案中未更新)

    试试这个HTML标记,它应该按您的预期工作。

    <div class="hero container-fluid">
        <ul id="carousel" class="row">
          <li class="col-12 col-sm-6 col-md-4">
            <a href="#"><img src="https://placeimg.com/300/200/people" alt="">
            <div class="caption">
              <h2>Lorem ipsum dolor</h2>
              <p>A true story</p>
            </div>
            </a>
          </li>
          <li class="col-12 col-sm-6 col-md-4">
            <a href="#"><img src="https://placeimg.com/300/200/nature" alt="">
            <div class="caption">
              <h2>Lorem</h2>
              <p>Lorem ipsum dolor sit amet, consectetur</p>
            </div>
            </a>
          </li>
          <li class="col-12 col-sm-6 col-md-4">
            <a href="#"><img src="https://placeimg.com/300/200/arch" alt="">
            <div class="caption">
              <h2>My neighborhood</h2>
              <p>Lorm ipsum dolor</p>
            </div>
            </a>
          </li>
          <li class="col-12 col-sm-6 col-md-4">
            <a href="#"><img src="https://placeimg.com/300/200/animals" alt="">
            <div class="caption">
              <h2>Into the wild</h2>
              <p>Lorem ipsum dolor sit amet, consectetur</p>
            </div>
            </a>
          </li>
        </ul>
      </div>
    
        2
  •  1
  •   Michael Benjamin William Falcon    7 年前

    柔性容器的初始设置是 flex-shrink: 1 。这意味着允许弹性物品收缩,以免溢出容器。这就是你在布局中看到的。

    你需要禁用 flex-shrink .

    而不是这个:

    #carousel li {
        padding: 0 0 70px 0;
        width: 33.333%;
    }
    

    试试这个:

    #carousel li {
        padding: 0 0 70px 0;
        width: 33.333%;
        flex-shrink: 0;
    }
    

    或者,更好(为了提高效率),尝试以下方法:

    #carousel li {
        padding: 0 0 70px 0;
        flex: 0 0 33.333%; /* flex-grow, flex-shrink, flex-basis */
    }
    
        3
  •  0
  •   Razvan Zamfir    7 年前

    我已经能够 确切地 所期望的效果,感谢社区的2名成员:

    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
    }
    .page-wrapper {
      min-height: 100%;
    }
    .hero {
      height: 100vh;
      background: #212121;
      justify-content: center;
      align-items: center;
    }
    #carousel {
      display: flex;
      list-style-type: none;
      overflow-x: scroll;
      margin: 0;
      padding: 0;
      justify-content: left;
      align-items: center;
    }
    #carousel li {
      padding: 0 0 70px 0;
      flex-shrink: 0;
    }
    #carousel a {
      text-decoration: none;
      color: #fff;
    }
    #carousel img {
      display: block;
      width: 100%;
    }
    #carousel .caption {
      padding: 20px 20px 0 20px;
    }
    #carousel h2 {
      font-size: 20px;
      line-height: 1;
      margin: 0;
      padding: 0;
    }
    #carousel p {
      font-size: 10px;
      padding: 0;
      margin: 5px 0 0 0;
    }
    <link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="page-wrapper">
      <div class="hero d-flex">
          <ul id="carousel">
            <li class="col-xs-12 col-sm-6 col-md-4">
              <a href="#">
            <img src="https://placeimg.com/600/400/people" alt="">
            <div class="caption">
              <h2>Lorem</h2>
              <p>A true story</p>
            </div>
            </a>
            </li>
            <li class="col-xs-12 col-sm-6 col-md-4">
              <a href="#">
            <img src="https://placeimg.com/600/400/nature" alt="">
            <div class="caption">
              <h2>Lorem ipsum</h2>
              <p>Lorem ipsum. Dolor sit amet.</p>
            </div>
            </a>
            </li>
            <li class="col-xs-12 col-sm-6 col-md-4">
              <a href="#">
            <img src="https://placeimg.com/600/400/arch" alt="">
            <div class="caption">
              <h2>Lorem</h2>
              <p>Lorem ipsum. Dolor sit amet</p>
            </div>
            </a>
            </li>
            <li class="col-xs-12 col-sm-6 col-md-4">
              <a href="#">
            <img src="https://placeimg.com/600/400/animals" alt="">
            <div class="caption">
              <h2>Into the wild</h2>
              <p>Lorem ipsum dolor sit amet, consectetur</p>
            </div>
            </a>
            </li>
          </ul>
      </div>
    </div>
    推荐文章