Высота диска равна нулю, в то время как элементы (элементы) должны содержать

Question

членов,

У меня возникли проблемы с моим кодом HTML. Я пытаюсь сделать кое-что из youtube. Но когда я пытаюсь создать это:

Как это должно выглядеть 1

Но вот как это выглядит, когда я пытаюсь сделать это в HTML:

http://jsfiddle.net/4u64jb5w/3/

<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; 
} 

Я вы заметили, проверяя код в google chrome, что все div имеют ширину, но не высоту. Я думаю, что это имеет какое-то отношение к моему позиционированию в CSS, но я не знаю точно, что я сделал неправильно. Как мне получить понравившуюся картинку, которую я разместил?

Любая помощь приветствуется!

Спасибо заранее

ОБНОВЛЕНИЕ !:

Когда я даю дивы статической высоту я получаю принадлежавший результат, но как это возможно, что я должен делать это?

Answer 1

Вы предоставили position: absolute; для дочерних элементов, таких как title1 и footer. Но ближайший родитель: position: static;, поэтому они были несогласованы.

Помимо этого, вместо того, чтобы иметь margin-left для видеоконтента, желательно, чтобы он плавал влево. он будет очень общим, а также может легко реагировать на него.

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

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

.Video-content { 
    float: left; 
    position: relative; 
    margin-left: 10px; 
    height: 100%; 
    min-height: 150px; 
} 

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


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

DEMO

Answer 2

Вам не нужно поплавки и только абсолютно позиционирован элемент должен быть один вы хотите в нижней

.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; 
 
}

<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>

Answer 3

Вы имеете здесь возникли проблемы. Первый заключается в том, что элементы, которые являются position:absolute;, не создают пространства внутри родительского контейнера. Итак, сначала ваша метка a рушится, потому что .Tite1 не занимает места, а затем контейнер .video-content рушится, потому что ни .Video-footer. Это равно нулю для этого целого блока.

Вторая проблема заключается в том, что элементы, которые являются float ed, по умолчанию не учитываются в контексте стекирования их родителя. Поэтому, если все элементы в родительском элементе «floated», родительский элемент не имеет высоты. Это относится к вашему элементу .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 создать пространство через несколько различных методов, самый простой путем применения overflow:hidden к обертке .Video.

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

Answer 4

ли Несколько twerks и придумал этот Check Fiddle 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; 
} 

Answer 5

Вы находитесь на полпути. Вместо плавающей .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