html - 流体设计创建不均匀的列

Question

我有一个用于显示视频的双列布局(没有为这个特定任务使用列，因为我已经在使用带有另一个侧边栏的列和这个内容部分，这导致我出现流畅布局问题，特别是在第二列中，我目前将其显示为两列。

它通常呈现得很好，有一些自定义 CSS 只是为了修复对齐等 - 。

我的问题在于标题，例如 <h4>{{video.title}}</h4>长度不同，因此当浏览器调整大小时，它会将其他内容向下推，导致直接父 div 的高度增加，然后导致它包含在 ng-repeat 中的顶级 div 的高度增加(它只通过 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，我计划清理它(例如删除那些可怕的子选择器)。

Answer 1

哦，那是一些非常困惑的代码!

有问题的 h4 的容器(使用你糟糕的代码，我只能将其称为“#VideoContent 的第五级子元素的 div”)将 display 设置为 inline- block 。

内联 block 的宽度与其内容一样宽。

要使它的宽度不同于它的内容试图达到的宽度，您必须显式声明宽度:

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

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

你的代码完全是一团糟，所以我为你写了一个干净的例子: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 强制文本一行，使用 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，而不要使用那些 > 层次结构。每次您当前的代码显示在浏览器中时，地球上的某个地方就会有一只小猫痛苦地死去。