Жидкий дизайн создает неровные столбцы
У меня есть два столбца для отображения видео (без использования столбцов для этой конкретной задачи, поскольку я уже использую столбцы с другой боковой панелью и этот раздел содержимого, который вызывает у меня проблемы с текучими макетами, в частности во втором столбце, в настоящее время я сделать это с двумя колонками.
Как правило, он рендерится просто отлично, с небольшим количеством нестандартного CSS только для исправления выравнивания и тому подобного.
Моя проблема заключается в заголовках, таких как в <h4>{{video.title}}</h4> разной длины, поэтому при изменении размера браузера он выталкивает другой контент вниз, что приводит к увеличению высоты прямого родительского элемента div, что приводит к увеличению высоты элемента верхнего уровня, в котором он содержится, с помощью ng-repeat (который повторяет div только через массив JS - это директива 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 не самый чистый банкомат, я планирую его почистить (например, убрать тех страшных дочерних селекторов).
1 ответ
О, это очень грязный код!
Контейнер проблемного h4 (с вашим ужасным кодом я могу ссылаться на него как на "div, который является дочерним элементом пятого уровня от #VideoContent") display установлен в inline-block,
Встроенный блок становится таким же широким, как его содержимое.
Чтобы его ширина отличалась от ширины содержимого, вы должны объявить ширину явно:
...
> div
display: inline-block
width: 15em
...
Если вы хотите сохранить свой макет жидкости, то вы не должны использовать inline-block на первом месте. Оставаться с block как для всех контейнеров, так и для детей. Установите ширину контейнера явно. Чтобы создать два столбца, поместите первый столбец и добавьте левое поле ко второму столбцу.
Ваш код полностью разрушен, поэтому я написал для вас чистый пример: 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 добавить три точки.
И вот эти исправления для вашего уродливого выравнивания двух столбцов:
- Ради бога, удали все
display: inline-blockдекларации, они совершенно не нужны и ломают макет. - Применять
float-leftк изображению (.pull-left). - Применять
margin-left: $img-width + 30pxк описанию (> div:last-child), где$img-widthширина изображения.
Ура! Это работает как шарм:
Вы можете поиграть с этим здесь: http://fiddlesalad.com/sass/example-for-stack/
Не забудьте полностью переписать ваш HTML и применить CSS семантически, без > Иерархии. Каждый раз, когда ваш нынешний код отображается в браузере, где-то на Земле котенок умирает мучительной смертью.