0

ビデオを表示するための 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 ではないことを知っています。私はそれをクリーンアップする予定です (恐ろしい子セレクターを削除するなど)。

4

1 に答える 1

1

ああ、それは非常に厄介なコードです!

問題のあるh4のコンテナ(ひどいコードでは、「#VideoContentの第5レベルの子であるdiv」としてのみ参照できます)はにdisplay設定されていinline-blockます。

インラインブロックは、そのコンテンツと同じ幅になります。

コンテンツの幅とは異なる幅にするには、幅を明示的に宣言する必要があります。

...
          > div
            display: inline-block
            width:   15em
...

レイアウトを流動的に保ちたい場合はinline-block、そもそも使用しないでください。blockすべてのコンテナと子供のために両方と一緒にいてください。コンテナの幅を明示的に設定します。2つの列を作成するには、最初の列をフロートさせ、2番目の列に左マージンを追加します。

あなたのコードは完全な難破であるため、私はあなたのためにきれいな例を書きました:http: //jsfiddle.net/z6Gsh/2/

PS唯一の言い訳は、HTMLとCSSの両方がCMSによって提供され、それを変更することは許可されておらず、多くのCSSをオーバーライドすることを余儀なくされているということです。そのHTMLを自分で書いた場合は、... あなたのコードは悪いです、そしてあなたは気分が悪いはずです。

UPD 2013-03-28

ああ、それであなたはアイテムが垂直に成長するのを防ぐ必要がありますか?

さあ、あなたのくだらないコード構造を維持します:

$img-width: 200px
$Blue: blue

div#VideoContent
  width: 580px // You won't need this
  outline: 1px solid red
  > div
    > div.VideoSummary
      margin-top: 20px
      &:first-child
        margin-left: 2.5%
      > div.VideoInfo
        > div
          > div
            h4, p
              white-space: nowrap // Forcing the paragraphs be one line
              overflow-x: hidden // Trimming the lines 
              text-overflow: ellipsis // Adding three dots
              line-height: 1em // Fixing ridiculous line height
              margin: 0.5em // Fixing margins
          .pull-left
            float: left // The image is pulled to the left
          > div:last-child
            margin-left: $img-width + 30px // The text is pushed to the right
        > p
          margin-top: 20px
          clear: both // The text below the image should not start to the right of it
      > 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

// This is for example
.pull-left
  width: $img-width
  height: 130px
  background-color: pink

アイデアは単純です。を使用white-space: nowrapしてテキストを1行に強制し、を使用してテキストoveflow-x: hiddenをトリミングし、を使用text-overflow: ellipsisして3つのドットを追加します。

そして、これらはあなたの醜い2列の配置を修正するための変更です:

  1. 神のために、すべてのdisplay: inline-block宣言を削除してください。それらは完全に不要であり、レイアウトを壊します。
  2. 画像に適用float-leftします(.pull-left)。
  3. margin-left: $img-width + 30px説明(> div:last-child)に適用します。ここ$img-widthで、は画像の幅です。

わーい!それは魅力として機能します:

http://d.pr/i/9Ma3+

ここでそれをいじることができます:http://fiddlesalad.com/sass/example-for-stack/

>これらの階層を使用せずに、HTMLを完全に書き直し、CSSをセマンティックに適用することを忘れないでください。現在のコードがブラウザに表示されるたびに、地球上のどこかで子猫が苦痛な死を遂げます。

于 2013-03-23T20:37:56.740 に答える