Разрыв строки с помощью CSS - PullRequest
Новая
       1

Разрыв строки с помощью CSS

1 голос
/ 20 июля 2011

У меня есть 7 делений подряд со всем очень небольшим содержанием. Я хочу, чтобы первые 3 по одной строке, затем следующие 3, и так далее. 

<div class="parent">
 <div class="child-a">abc</div>
 <div class="child-b">def</div>
 <div class="child-c">ghi</div>
 <div class="child-d">jkl</div>
 <div class="child-e">mno</div>
 <div class="child-f">pqr</div>
 <div class="child-g">stu</div>
</div>

Так как я могу заставить это работать?

Для первой строки у меня есть 

.child-a, .child-b, .child-c {
  padding: 0 2% 0 0;
  width:100%
  display: inline;
  float: left;
 }

Что такое css для child-c, child-d, child-e, чтобы они отображались ниже child-a, child-b, child-c, а не в одной строке?

Мой полный код: http://jsfiddle.net/winchendonsprings/UfswL/11/

Ответы [ 3 ]

6 голосов
/ 20 июля 2011

Лучшим способом было бы что-то вроде этого. 

.parent div { float: left; }
.parent div:nth-child(3n + 1) { clear: left; }

Каждый элемент после третьего перейдет на следующую строку. Демо

Это то, что вы просили the first 3 one a line then the next 3, and so on. эффективно игнорирует некоторые проблемы совместимости браузеров.

1 голос
/ 20 июля 2011

То, что я получаю, это то, что вы хотите 3 деления в одном верхнем ряду, затем 3 деления во втором ряду, затем два последних деления в последнем ряду. Если это правильно, вам не нужно 7 ID. Вместо этого используйте один класс. 

.child_div {
    width: 33%;
    height: 50px; /* for beautification */
    float: left;
}

Все дочерние элементы должны использовать этот класс. Дивы автоматически выровняются друг с другом.

Пара вопросов, которые могут возникнуть:

  • Родительский div будет иметь высоту 0, потому что все его дочерние div'ы плавают. Чтобы это исправить, вы можете установить высоту родительского элемента div (не зависит от длины содержимого) или установить overflow:hidden; или overflow:auto; («тянет» дочерний контент внутрь)
  • Различные браузеры могут реагировать немного по-разному. Например, для IE вам нужен width:32.5%;, например, потому что он работает немного по-другому. Надеюсь, это поможет.
1 голос
/ 20 июля 2011

Вы забыли точки для классов: 

.child-a, .child-b, .child-c,
.child-d, .child-e, .child-f,
.child-g, .child-h, .child-i {
    padding: 0 2% 0 0;
    width:100%
    display: inline;
    float: left;
}

.child-d { clear: left; }
.child-g { clear: left; }

Это сделает так, чтобы 'd' и 'g' не могли иметь плавающий элемент слева от них.

...