Почему правый и левый поплавки не складываются вместе?Откуда берется пространство между ними? - PullRequest
2 голосов
/ 04 марта 2012

Бьюсь об заклад, это, вероятно, основные вещи, я просто никогда не сталкивался с этим раньше.Итак, код:

  • У меня есть h1, затем ap, а затем дважды одно и то же.Итак, h1 + p + h1 + p + h1 + p;
  • Я переместил h1 влево с шириной 29%;
  • Я переместил p всправа, ширина 69% ширины;

Мой вопрос:

Почему h1 не складываются вместе?Я замечаю первые два.Почему третий не делает то же самое?Почему он выровнен по верхнему краю со вторым абзацем (обратите внимание, что если вы измените нижнее поле p, h1 следует за ним)?Что мне не хватает в поведении с плавающей точкой?

Вот пример на tinkerbin: http://tinkerbin.com/IUVovfjM

Вот код:

<head>
<style>
h1, p, body{
  margin: 0;
  padding: 0;
  line-height: 1.4;
  font: inherit;
}

h1{
   float: right; 
   width: 29%; 
   background-color: lightblue;
   }

p{
   float: left; 
   width: 69%; 
   background-color: indianred;
   } 
</style>
</head>

<body>
<h1>This Is The Title</h1>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos       multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A   exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
<h1>This Is The Title</h1>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
<h1>This Is The Title</h1>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
</body>

Заранее спасибо.

Ответы [ 2 ]

3 голосов
/ 04 марта 2012

Почему?

Взято из спецификации CSS:

  1. "Число с плавающей запятой - это смещение влево или вправо на текущей строке ."- http://www.w3.org/TR/CSS2/visuren.html#floats
  2. "Внешняя вершина плавающего блока не может быть выше внешней вершины любого блока или плавающего блока, созданного элементом ранее в исходном документе."- элемент # 5 в http://www.w3.org/TR/CSS2/visuren.html#float-position

Итак, это порядок ваших HTML-элементов, который делает это.

Не меняйте свой CSSИграйте только с заголовками и абзацами, и вы получите «почему»: http://tinkerbin.com/xex2Pykn

Чтобы достичь желаемого стекинга, без изменения CSS, вы можете попробовать это:

<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
<h1>This Is The Title</h1>
<h1>This Is The Title</h1>
<h1>This Is The Title</h1>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>

Существует несколько других возможных решений, меняющих структуру CSS и / или HTML.

0 голосов
/ 04 марта 2012

http://tinkerbin.com/wMLrXlfQ

Добавьте clear: both; к h1, и оно будет отображаться правильно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...