ビデオを表示するための 2 列のレイアウトがあります (この特定のタスクに列を使用せずに、別のサイドバーとこのコンテンツ セクションで列を既に使用しているため、特に 2 番目の列内で、流動的なレイアウトで問題が発生しています。現在、私は2 列で表示します。
それは通常、配置などを修正するためだけにカスタム CSS を少し使用すると、問題なくレンダリングされます。
私の問題は、長さが異なるなどのヘッダーに<h4>{{video.title}}</h4>
あるため、ブラウザーのサイズが変更されると、他のコンテンツが押し下げられ、直接の親 div の高さが増加し、最上位の div の高さが増加します。それは ng-repeat に含まれています(JS配列を介してdivを繰り返すだけです-これはAngularJSディレクティブであり、質問には関係ありません)。その結果、その下にあるすべての div が右に押し出され、その結果、div よりもわずかに小さい空のスポットが生じ、そうでなければきれいな列のレイアウトが台無しになります。
HTML
<div id="VideoContent" class="span9">
<h3>Browse {{languageSelected}} Videos<span ng-hide="hasDifficulty(difficultySelected)"> ({{difficultySelected}})</span></h3>
<div class="row-fluid">
<div class="VideoSummary span4" ng-repeat="(videoIndex, video) in videos | filter: filterResults">
<div class="VideoInfo">
<div>
<div class="pull-left">
<img alt="Video Preview Image" src="./images/video1.png" />
</div>
<div>
<h4>{{video.title}}</h4>
<p>Language: {{video.language}}</p>
<p>Difficulty Level: {{video.difficulty}}</p>
<p>Topics: <span ng-repeat="(topicIndex, topic) in video.topics">{{topic}}<span ng-hide="isLastTopic(topicIndex, video.topics)">, </span></span></p>
<p>Contributor: {{video.origin.creator}}</p>
</div>
</div>
<p>{{video.description}}</p>
</div>
<div class="MiscInfo">
<div>
<p class="pull-right label">{{video.views}} views</p>
</div>
<div>
<p class="pull-right label" ng-show="hasTranslation(video)">Translate</p>
<p class="pull-right label" ng-show="hasCaption(video)">Caption</p>
</div>
</div>
</div>
</div>
</div>
CSS(サス)
> div#VideoContent
> div
> div.VideoSummary
display: inline-block
margin-top: 20px
&:first-child
margin-left: 2.5%
> div.VideoInfo
> div
> div
display: inline-block
> div:last-child
margin-left: 30px
> p
line-height: 10px
> p
margin-top: 20px
> div.MiscInfo
border-top-width: 1px
border-top-color: $Blue
border-top-style: dotted
padding-top: 10px
> div
display: inline
> div:first-child
margin-right: 10%
> p
float: left
> div:last-child
> p:last-child
margin-right: 10px
私は、sass が最もクリーンな ATM ではないことを知っています。私はそれをクリーンアップする予定です (恐ろしい子セレクターを削除するなど)。