CSS: отображение: встроенный блок и позиционирование: абсолютный - PullRequest
Новая
       4

CSS: отображение: встроенный блок и позиционирование: абсолютный

29 голосов
/ 18 февраля 2011

Пожалуйста, обратите внимание на следующий код: 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
        .section {
            display: block;
            width: 200px;
            border: 1px dashed blue;
            margin-bottom: 10px;
        }
        .element-left,
        .element-right-a,
        .element-right-b {
            display: inline-block;
            background-color: #ccc;
            vertical-align: top;
        }
        .element-right-a,
        .element-right-b {
            max-width: 100px;
        }
        .element-right-b {
            position: absolute;
            left: 100px;
        }
    </style>
    <title>test</title>
</head>
<body>
    <div class="section">
        <span class="element-left">some text</span>
        <span class="element-right-a">some text</span>
    </div>
    <div class="section">
        <span class="element-left">some text</span>
        <span class="element-right-a">some more text to force line wrapping</span>
    </div>
    <div class="section">
        <span class="element-left">some text</span>
        <span class="element-right-b">some text</span>
    </div>
    <div class="section">
        <span class="element-left">some text</span>
        <span class="element-right-b">some more text to force line wrapping</span>
    </div>
    <div class="section">
        <span class="element-left">some text</span>
        <span class="element-right-b">some more text to force line wrapping</span>
    </div>
</body>
</html>

Элемент с абсолютным позиционированием, очевидно, заставляет вмещающий ящик "забыть", какая высота ему нужна.

Мне нужно абсолютное позиционирование внутри поля "сечение", есть ли другое решение для этого?

спасибо заранее, Джеронимо

редактировать

Использование таблиц на самом деле не вариант, мне нужен своего рода «многоуровневый» / «вложенный» макет, где второй столбец всегда находится в одной позиции: 

| some text in first column       | some text in 2nd column
  | some indented text            | 2nd column
  | also indented                 | 2nd col
    | even more indent            | 2nd column with a lot of text that
                                  |  makes it wrap
  | text                          | ...
| blah blah                       | ...

(конечно, без "|" s)

Ответы [ 3 ]

51 голосов
/ 18 февраля 2011

Когда вы используете position:absolute;, элемент выводится из обычного потока страниц.Поэтому он больше не влияет на макет элемента контейнера.Таким образом, элемент контейнера не принимает во внимание его высоту, поэтому, если нет ничего другого для установки высоты, тогда контейнер будет иметь нулевую высоту.

Кроме того, установка display:inline-block; не имеет никакого смысла для элементаэто position:absolute;.Опять же, это потому, что абсолютное позиционирование убирает элемент из потока страниц.Это противоречит inline-block, который существует только для того, чтобы влиять на то, как элемент вписывается в поток страниц.Все элементы, которые position:absolute;, автоматически обрабатываются как display:block, поскольку это единственный логический режим отображения для абсолютного позиционирования.

Если вам необходимо абсолютное позиционирование, тогда единственное решение для вашегоПроблема с высотой - установить высоту контейнера.

Однако я подозреваю, что вы можете обойтись без абсолютного позиционирования.

Похоже, вы пытаетесь расположитьвторой <span> в каждом блоке в фиксированной позиции в блоке, чтобы они выровнялись.

Это классическая проблема CSS.В «старые добрые времена» веб-дизайнеры делали это, используя таблицу с фиксированной шириной в ячейках таблицы.Это, очевидно, не ответ для современных веб-дизайнеров, но это то, что вызывает много вопросов.

Есть несколько способов сделать это с помощью CSS.

Самый простойустановить оба элемента <span> на display:inline-block; и присвоить им фиксированную ширину.

например: 

<div class='section'>
    <span class="element-left">some text</span>
    <span class="element-right">some text</span>
</div>

со следующим CSS: 

.section span  {display:inline-block;}
.element-left  {width:200px;}
.element-right {width:150px;}

[РЕДАКТИРОВАТЬ] после того, как вопрос был обновлен

Вот как я могу добиться того, о чем вы сейчас спрашиваете: 

<div class='section'>
    <span class="element-left"><span class='indent-0'>some text</span></span>
    <span class="element-right">some text</span>
</div>
<div class='section'>
    <span class="element-left"><span class='indent-1'>some text</span></span>
    <span class="element-right">some text</span>
</div>
<div class='section'>
    <span class="element-left"><span class='indent-2'>some text</span></span>
    <span class="element-right">some text</span>
</div>

со следующим CSS: 

.section span  {display:inline-block;}
.element-left  {width:200px;}
.indent-1 {padding:10px;}
.indent-2 {padding:20px;}
.element-right {width:150px;}

Небольшая дополнительная разметка, но она дает желаемый эффект.

2 голосов
/ 29 мая 2014

На самом деле это можно сделать легко и просто с помощью div.Вам просто нужно поместить div с позицией: относительно внутри div или встроенного блока отображения.Установите его ширину и высоту так же, как содержащийся div.Затем вы обнаружите, что можете расположить еще один div внутри него.

2 голосов
/ 18 февраля 2011

номер

Вы можете позиционировать абсолютно, а затем иметь копию элемента внутри поля с помощью visible: none, но абсолютное позиционирование по определению делает его «плавающим» элементом, который не взаимодействует с элементами над ним.

Предполагая, что макет вашей страницы фиксирован, вы можете использовать padding-left: #px; для достижения своей цели, поскольку я не думаю, что вам нужно относительное позиционирование.

В качестве альтернативы, вы можете использовать display: table-*, чтобы заставить его сохранять более строгую форму, не затрагивая структуру документа, как показано здесь

Однако, в зависимости от того, хотите ли вы, чтобы ячейки были текучими, вам, возможно, придется изменить .section деления на display: table-row, если вам не нравится заранее заданная настройка ширины и вы хотите, чтобы отдельные разделы выстраивались в линию.

...