Расположение соседних элементов - PullRequest
Новая
       4

Расположение соседних элементов

2 голосов
/ 14 марта 2012

Я пытаюсь добиться следующего эффекта: 

+----------------------+-----------------------------------+-----------------------+
| span (absolute left) | div consuming all space inbetween | span (absolute right) |
+----------------------+-----------------------------------+-----------------------+

На первый взгляд это кажется действительно простым;однако:

  • Я не хочу устанавливать ширину левого / правого элементов (я хочу, чтобы они автоматически сжимались);и
  • Я не хочу устанавливать ширину всепоглощающего div (я хочу, чтобы он заполнил произвольное пространство).

Я возился с относительным позиционированием инекоторое время плавает, и я начинаю чувствовать, что упускаю что-то очевидное, так как я так близко.Я был бы признателен, чтобы избавиться от моих страданий:)

(Использование таблицы только что пришло мне в голову - у меня будет еще одна скрипка.)

Спасибо:)

Ответы [ 2 ]

2 голосов
/ 14 марта 2012

Спасибо, БПратик!У меня было прозрение, когда я прочитал: плавающие столбцы начинают «плавать» в той точке в тексте родительского элемента, где они впервые появляются .

Код принципа, который я имел, был правильным: 

<div>
    <span style="float:left">span (float left)</span>
    <div>greedy div</div>
    <span style="float:right">span (float right)</span>
</div>

Однако, это создает следующее: 

+-------------------+--------------------------+--------------------+
| span (float left) |                  greedy div                   |
+-------------------+--------------------------+--------------------+
                                               | span (float right) |
                                               +--------------------+

Следовательно, порядок элементов должен быть span, span, div, в противном случае правосторонний интервал будет перенесен на строку ниже (жадный div, крадущий его пятно).

Следовательно, решение: 

<div>
    <span style="float:left">span (float left)</span>
    <span style="float:right">span (float right)</span>
    <div>greedy div</div>
</div>

И последующий результат: 

+-------------------+--------------------------+--------------------+
| span (float left) |        greedy div        | span (float right) |
+-------------------+--------------------------+--------------------+

Надеюсь, это понятно:)

1 голос
/ 14 марта 2012

На самом деле вам не нужно использовать элемент таблицы HTML, вместо этого вы можете стилизовать любой элемент так, чтобы он вел себя так же, как таблица, используя display: table/table-row/table-cell.

...