视频部分设计未对齐

Question

我正在努力使视频部分看起来像下面的设计

我在右侧面临两个设计休息

缩略图未填充“vp-hqdefault-w”，它显示部分图像，其余部分隐藏。

第二，我无法将缩略图旁边的视频标题与图像中的显示对齐

def my_view(request):
    if request.method == 'POST':
        for data in request.FILES.values():
            with open(data.name, 'wb') as file:
                file.write(data.read())
        # do other stuff

Codepen link

我试图让它响应它不会破坏

Answer 1

您遇到此问题是因为您没有将float:left属性添加到视频thumnail div中。试试这段代码。

.vp-video-img-w {
    position: relative;
    overflow: hidden;
  float: left;
  margin-right: 10px;
  width: 30%;
}

Answer 2

尝试以下代码：

.header {
  padding-top: 20px;
  padding-bottom: 20px;
}

.video-embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	margin-bottom: 0px;
}
.active-iframe-wrapper {
	float: left;
	width: 100%;
	background-color: #f5f5f5;
}

.video-embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-item-w{
  background-color:#ccc;
}

.vp-hqdefault-w {
	max-height: 80px;
	max-width: 120px;
	overflow: hidden;
	position: relative;
   width:30%;
}
.vp-video-img-w {
	position: relative;
	width: 30%;
	overflow: hidden;
  float: left;
}
.vp-video-details{
  width:70%;
  float:left;
}
.vp-video-img-w img {
    max-width: 100%;
}
.video-thumbnail:after {
  content: '';
  display: block;
  clear:both;
}

.footer {
  border-top: 1px solid #444;
  padding-top: 20px;
  margin-top: 20px;
  color: #999
}

.p {
  text-align: center;
  padding-top: 120px;
}

.p a {
  text-decoration: underline;
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  

 <div class="row content">
    <div class="col-md-7 col-sm-6">
      <div class="active-iframe-wrapper video-embed-container">
          <iframe id='activeIFrame' class='active-iframe' width='100%' height='324' src="http://www.youtube.com/embed/SCRUg5s389Q?showinfo=0&modestbranding=1" ></iframe>
       </div>
      
      <p>Title of the video</p>
    </div>
   
   
    <div class="col-md-5 col-sm-6">
     
       <a class="video-thumbnail" href="http://www.youtube.com/embed/SCRUg5s389Q?showinfo=0&modestbranding=1">
      <div class="vp-video-img-w vp-hqdefault-w">
        <img src="http://img.youtube.com/vi/SCRUg5s389Q/hqdefault.jpg" title="">                                  
      </div>
        <div class="vp-video-details">
          <h3 class="video-title">Mr. Bean is back on the road One</h3>
        </div>
      </a>
    
      
      <a class="video-thumbnail" href="http://www.youtube.com/embed/QThP5kDUJJ0?showinfo=0&modestbranding=1">
      <div class="vp-video-img-w vp-hqdefault-w">
        <img src="http://img.youtube.com/vi/QThP5kDUJJ0/hqdefault.jpg" title="">                                  
      </div>
        <div class="vp-video-details">
          <h3 class="video-title">Mr. Bean is back on the road Two</h3>
        </div>
      </a>
      
      <a class="video-thumbnail" href="http://www.youtube.com/embed/xIOP1PLjUTs?showinfo=0&modestbranding=1">
      <div class="vp-video-img-w vp-hqdefault-w">
        <img src="http://img.youtube.com/vi/xIOP1PLjUTs/hqdefault.jpg" title="">                                  
      </div>
        <div class="vp-video-details">
          <h3 class="video-title">Mr. Bean is back on the road Three</h3>
        </div>
      </a>
       
    </div>
   
  </div>

Answer 3

更改

.vp-video-img-w {
  position: relative;
  width: 100%;
  overflow: hidden;
} 

到

.vp-video-img-w {
  position: relative;
  width: 100%;
  overflow: hidden;
  float: left;
}