Форум

PashPP · #1 (**permalink**) 21.10.2012, 23:22

Собственно, как сделать так, чтоб каждый инлайн был на новой строчке?
Зачем? Чтоб, например, размер элемента не был больше вложенного контента и не занимал все свободное пространство.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>My menu</title>
  <style>

  div {
    display: inline-block;
    border: 1px solid black;
    background-color: #999;
  }

  div:after {
    content: " ads";
    clear: both;
  }
  </style>
</head>
<body>
<div style="padding: 55px" id="looongCat" >sdffdsfds </div>
<div> dsdsds </div>
<div> dsdsds </div>
<div> dsdsds </div>
<div> dsdsds </div>
</body>
</html>

Кстати, почему в моем примере такое странное поведение псевдоселектора after ?

vchmuzh · #2 (**permalink**) 21.10.2012, 23:49

Сообщение от PashPP

Чтоб, например, размер элемента не был больше вложенного контента и не занимал все свободное пространство.

Для этих целей, вместо inline-block можно использовать float:left

Вроде с after все норм, добавляет content в конец блока к которому применяется.

PashPP · #3 (**permalink**) 21.10.2012, 23:59

Сообщение от vchmuzh

Для этих целей, вместо inline-block можно использовать float:left

Неа, не работает, я уже по разному пробовал.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>My menu</title>
  <style>
  div {
    display: inline-block;
    border: 1px solid black;
    background-color: #999;
    float: left;
  }
  </style>
</head>
<body>
<div style="padding: 55px" id="looongCat" >sdffdsfds </div>
<div> dsdsds </div>
<div> dsdsds </div>
<div> dsdsds </div>
<div> dsdsds </div>
</body>
</html>

Сообщение от vchmuzh

Вроде с after все норм, добавляет content в конец блока к которому применяется.

Но он же должен выводить ПОСЛЕ блока нашего, вроде, а не в нем/

vchmuzh · #4 (**permalink**) 22.10.2012, 00:11

А , точно еще clear:both надо

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>My menu</title>
  <style>
  div {
    display: inline-block;
    border: 1px solid black;
    background-color: #999;
    float: left;
    clear:both;
  }
  </style>
</head>
<body>
<div style="padding: 55px" id="looongCat" >sdffdsfds </div>
<div> dsdsds </div>
<div> dsdsds </div>
<div> dsdsds </div>
<div> dsdsds </div>
</body>
</html>

Сообщение от PashPP

Но он же должен выводить ПОСЛЕ блока нашего, вроде, а не в нем/

The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content - то есть после содержимого элемента(в конце)
я сам путался, потому что во многих учебниках пишут, что после элемента

PashPP · #5 (**permalink**) 22.10.2012, 00:29

Сообщение от vchmuzh

то есть после содержимого элемента(в конце)
я сам путался, потому что во многих учебниках пишут, что после элемента

А в справке от хтмлбука действительно : "Псевдоэлемент, который используется для вывода желаемого контента после элемента, к которому он добавляется. "

Сообщение от vchmuzh

float: left; clear:both;

Дивнота, но работает. Спасибо.

Форум

Справочник

Discord чат

Курсы javascript