Question

我的网页上有2个视频部分，宽度为50％，这意味着2个视频将出现在一行中，我想要的是当只有1个视频时，该部分的宽度应调整为100％，意思是（如果我们只有1个视频，它将以100％的宽度显示，否则它将以50％的宽度显示）是否可能？

这是我的代码：

$("#phone").on("focus", function (evt) {
    if(this.value.length < 11)
        alert("Invalid");

});

Answer 1

Flexbox是我们的救世主

一个，两个和三个视频的示例：

div.row{
  display: flex;
  width : 100%;
  justify-content : space-around;
  border : red dashed 2px;
  margin-bottom : 10px;
}

<h3>With two videos : </h3>
<div class="row">
    <div>
        <iframe width="100%" src="https://www.youtube.com/embed/t83YU-vOwak"></iframe>
    </div>
    <div>
        <iframe width="100%" src="https://www.youtube.com/embed/t83YU-vOwak"></iframe>
    </div>
</div>

<h3>With one video : </h3>
<div class="row">
    <div>
        <iframe width="100%" src="https://www.youtube.com/embed/t83YU-vOwak"></iframe>
    </div>
</div>


<h3>With three videos : </h3>
<div class="row">
    <div>
        <iframe width="100%" src="https://www.youtube.com/embed/t83YU-vOwak"></iframe>
    </div>
    <div>
        <iframe width="100%" src="https://www.youtube.com/embed/t83YU-vOwak"></iframe>
    </div>
    <div>
        <iframe width="100%" src="https://www.youtube.com/embed/t83YU-vOwak"></iframe>
    </div>
</div>

Answer 2

            Finally i made it with the help of my senior below i have mentioned my example, this is what i was looking for.

                .card-group {
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-flex-flow: row wrap;
                    -ms-flex-flow: row wrap;
                    flex-flow: row wrap
                }
                .card-group .card {
                    -webkit-box-flex: 1;
                    -webkit-flex: 1 0 0%;
                    -ms-flex: 1 0 0%;
                    flex: 1 0 0%;
                    float:left;
                }                 

                .card iframe{
                    width:100%;
                    padding: 0 10px;
                    min-width:400px !important;
                    max-width:1200px !important;
                    border:0;
                }



    <div class="row">
        <div class="col-md-12">
            <div class="row margin-t20 card-group nopadding">
            <div class="card profilegallery"><iframe src="https://www.youtube.com/embed/t83YU-vOwak"></iframe></div>
            <div class="card profilegallery"><iframe src="https://www.youtube.com/embed/t83YU-vOwak"></iframe></div>
            <div class="card profilegallery"><iframe src="https://www.youtube.com/embed/t83YU-vOwak"></iframe></div>
             </div>
        </div>
    </div>

Answer 3

也可以使用非柔性方法来实现。

＆＃13;

.row {
  overflow: hidden;
}

.play {
  width: 100%;
  float: left;
}

.play:first-child:nth-last-child(2),
.play:nth-child(2):last-child {
  width: 50%;
}

.play:first-child:nth-last-child(3),
.play:nth-child(2):nth-last-child(2),
.play:nth-child(3):nth-last-child(1) {
  width: 33.33%;
}

＆＃13;

<h1> 3 Videos
  <div class="row">
    <div class="play">
      <iframe width="100%" src="youtube.com/embed/t83YU-vOwak"></iframe>
    </div>
    <div class="play">
      <iframe width="100%" src="youtube.com/embed/t83YU-vOwak"></iframe>
    </div>
    <div class="play">
      <iframe width="100%" src="youtube.com/embed/t83YU-vOwak"></iframe>
    </div>
  </div>

  <h1> 2 Videos
    <div class="row">
      <div class="play">
        <iframe width="100%" src="youtube.com/embed/t83YU-vOwak"></iframe>
      </div>
      <div class="play">
        <iframe width="100%" src="youtube.com/embed/t83YU-vOwak"></iframe>
      </div>
    </div>


    <h1> 1 Video
      <div class="row">
        <div class="play">
          <iframe width="100%" src="youtube.com/embed/t83YU-vOwak"></iframe>
        </div>
      </div>

＆＃13;

如果只有1个部分，宽度应调整为100％，否则将继续宽度为50％

3 个答案: