Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Перенос инлайн элемента (https://javascript.ru/forum/xhtml-html-css/32575-perenos-inlajjn-ehlementa.html)

PashPP 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 21.10.2012 23:49
Цитата:
Сообщение от PashPP
Чтоб, например, размер элемента не был больше вложенного контента и не занимал все свободное пространство.
Для этих целей, вместо inline-block можно использовать float:left

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

PashPP 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 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 22.10.2012 00:29
Цитата:
Сообщение от vchmuzh
то есть после содержимого элемента(в конце)
я сам путался, потому что во многих учебниках пишут, что после элемента
А в справке от хтмлбука действительно : "Псевдоэлемент, который используется для вывода желаемого контента после элемента, к которому он добавляется. "

Цитата:
Сообщение от vchmuzh
    float: left;    clear:both;
Дивнота, но работает. Спасибо.


Часовой пояс GMT +3, время: 09:09.