Question

成员

我的HTML代码遇到了麻烦。我想尝试制造一些youtube。但是当我试图创造这个：

它应该如何显示1

但是当我尝试用HTML创建它时，它就是这样的：

    <div class="Video">
        <div class="BlackRect"></div>
        <div class="Video-content">
            <a href="#"><h2 class="Titel">This is a video title..</h2></a>
            <div class="Video-footer">
                Gebruikersnaam
            </div>
        </div>

    </div>

.Video {
    display:block;
    position:relative;
    margin-top: 100px;
}

.BlackRect{
    Width:250px;
    height:150px;
    background-color:#000;
    float:left;
}

.Titel {
    color: #34495e;
    display:block;  
    font-size: 25px;
    float:left;
    position:absolute;
    top:0;
    margin-left: 270px; 
    padding: 0;
}

.Video-content{
    /*nothing to see here yet*/
}

.Video-footer {
    position: absolute;
    bottom: 0px;
    left:0px;
}

我注意到在检查谷歌浏览器中的代码时，div都有宽度但没有高度。我认为这与我在CSS中的定位有关，但我不确切知道我做错了什么。我怎么能得到这个像我发布的图片？

感谢任何帮助！

提前谢谢

UPDATE：

当我给div一个静态高度时，我得到了属于的结果，但我怎么可能这样做呢？

Answer 1

您已为{1}}提供了诸如title1和footer之类的子元素。但直接的父母是position: absolute;所以他们没有对齐。

除此之外，不要让视频内容position: static;，而是让它向左浮动。它将非常通用，也可以轻松实现响应。

margin-left

<强> DEMO

Answer 2

你在这里遇到了复杂的问题。第一个是position:absolute;元素不会在父容器中创建空间。因此，首先您的a代码会崩溃，因为.Tite1不会占用空间，然后.video-content容器会崩溃，因为.Video-footer也不会崩溃。这等于整个块的零高度。

您的第二个问题是，float ed的元素默认情况下不会在其父级的堆叠上下文中考虑。因此，如果父项中的所有元素都是“浮动”，则父元素没有高度。这是.BlackRect元素的情况。

要打破：

<!-- no height because all children/grandchildren produce 0 height -->
<div class="Video">
    <!-- doesn't create height because floated -->
    <div class="BlackRect"></div>
    <!-- doesn't create height because all children/grandchildren pos absolute -->
    <div class="Video-content">
        <!-- collapses because .Tite1 doesn't create height -->
        <a href="#">
            <!-- doesn't create height because position absolute -->
            <h2 class="Titel">This is a video title..</h2>
         </a>
        <!-- doesn't create height because position absolute -->
        <div class="Video-footer">
            Gebruikersnaam
        </div>
    </div>
</div>

如果.Video-content中的所有元素都位于绝对位置，则没有太多工作要做，但您可以强制.BlackRect通过几种不同的方法创建空间，最简单的方法是应用{{ 1}}到overflow:hidden包装器。

.Video

Answer 3

您不需要浮动，唯一绝对定位的元素应该是您想要的底部

＆＃13;

.Video {
  display: block;
  position: relative;
  margin-top: 100px;
}
.Video a {
  text-decoration: none;
}
.BlackRect {
  width: 250px;
  height: 150px;
  background-color: #000;
}
.Titel {
  color: #34495e;
  font-size: 25px;
  font-style: italic;
}
.Video-content {
  position: absolute;
  left: 270px;
  right: 0;
  top: 0;
  bottom: 0;
}

＆＃13;

<div class="Video">
  <div class="BlackRect"></div>
  <div class="Video-content">
    <a href="#"><h2 class="Titel">This is a video title..</h2></a>
    <div class="Video-footer">
      Gebruikersnaam
    </div>
  </div>

</div>

＆＃13;

Answer 4

你在那里。你不需要浮动.Titel，你需要浮动.Video内容，因为它是.BlackRect的兄弟：

.Video-content{
    float:left;
    margin-left:20px;
    height: 150px;
    position:relative;
}

注意我已经给它留了一个边距，所以文本与视频隔离，因为它与.BlackRect的高度相同，并将其定位为相对。我将它定位为相对于对页脚做一个小技巧：

.Video-footer {
    position:absolute;
    bottom:10px;
}

这可能是你绝对和相对定位的地方，但让我解释一下我做了什么：当父div有一个亲戚的位置时，父母的任何子div都有绝对和意志的位置绝对定位仅在该父容器中（换句话说，绝对相对于父，而不是页面）。它看起来像你所追求的，代码只需要简化。

通过删除不必要的选择器，只需简化其他所有内容：

.Video {
    margin-top: 100px;
}

.BlackRect{
    width:250px;
    height:150px;
    background-color:#000;
    float:left;
}

.Titel {
    color: #34495e;
    font-size: 25px;
    margin-top:10px;
}

/*to remove the underline*/
.Video-content a{
    text-decoration:none;
}

这是一个更新的 jsFiddle

Answer 5

很少有人扭曲并想出这个检查小提琴Fiddle CSS：

 .Video {
    position:absolute;
    display:block;
    background-color:gray;
    width:100%;
    height:60%;
}

.BlackRect{
    Width:250px;
    height:150px;
    background-color:#000;
    float:left;
}

.Titel {
    color: #34495e;
    display:block;  
    font-size: 25px;
    float:left;
    position:absolute;
    top:0;
    margin-left: 270px; 
    padding: 0;
}

.Video-content{
    /*nothing to see here yet*/
}

.Video-footer {
    margin-top:30%;
    float:right;
}

Div高度为零，而（应该）包含（s）元素

5 个答案: