Question

我有一个用于显示视频的两列布局（不使用此特定任务的列，因为我已经使用了另一个侧栏的列和此内容部分导致流体布局问题，特别是在第二列中，我目前有两列显示。

它通常渲染得很好，有一些自定义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，我打算清理它（例如删除那些可怕的儿童选择器）。

Answer 1

哦，这是一些非常混乱的代码！

有问题的h4的容器（使用您可怕的代码我只能将其称为“#VideoContent的第五级孩子的div”）将display设置为inline-block。

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

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

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

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

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

PS唯一的理由可能是CMS和CSS都提供了HTML和CSS，你不能修改它，你不得不重写很多CSS。如果您自己编写HTML，那么...... Your code is bad and you should feel bad.

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添加三个点。

这些是修改你丑陋的两列对齐的修改：

为了上帝的缘故，删除所有display: inline-block声明，它们是完全没必要的并打破布局。
将float-left应用于图片（.pull-left）。
将margin-left: $img-width + 30px应用于说明（> div:last-child），其中$img-width是图片的宽度。

耶！它充当魅力：

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

你可以在这里弄乱它：http://fiddlesalad.com/sass/example-for-stack/

不要忘记完全重写HTML并在语义上应用CSS，而不使用>层次结构。每当你的现有代码在浏览器中显示时，地球上的某个小猫就会死于痛苦的死亡。

流体设计会产生不均匀的柱

1 个答案:

UPD 2013-03-28