0

我有一个用于显示视频的两列布局（不使用该特定任务的列，因为我已经在使用带有另一个侧边栏的列，并且这个内容部分导致我出现流体布局问题，特别是在第二列中，我目前让它显示为两列。

它通常渲染得很好，使用一些自定义 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 (SASS)

> 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 的第五级子项的 div”）已display设置为inline-block.

内联块变得与其内容一样宽。

要使其宽度与内容尝试的宽度不同，您必须明确声明宽度： 

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

如果你想保持你的布局流畅，那么你不应该inline-block首先使用。与block所有容器和儿童一起使用。明确设置容器的宽度。要创建两列，请浮动第一列并为第二列添加左边距。

你的代码完全是一个残骸，所以我为你写了一个干净的例子：http: //jsfiddle.net/z6Gsh/2/

PS 你唯一的借口可能是 HTML 和 CSS 都是由 CMS 提供的，你不能修改它，你不得不重写很多 CSS。如果您自己编写了该 HTML，那么... 你的代码很糟糕，你应该感觉很糟糕。

更新日期 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强制文本单行，使用oveflow-x: hidden修剪它并使用text-overflow: ellipsis添加三个点。

这些是要修复丑陋的两列对齐的更改：

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