CSS: display: inline-block and positioning: absolute

Question

CSS: display: inline-block and positioning: absolute

Proszę wziąć pod uwagę następujący kod:

<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>

Element z absolutnym pozycjonowaniem sprawia, że pudełko "zapomina", jakiej wysokości potrzebuje.

Potrzebuję absolutnego pozycjonowania wewnątrz pola "sekcja", czy jest na to jakieś inne rozwiązanie?

Z góry dzięki, geronimo

Edit

Używanie tabel nie jest tak naprawdę opcją, potrzebuję jakiegoś"wielopoziomowego"/" zagnieżdżonego " układu, gdzie drugi col jest zawsze na tym samym pozycja:

| 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                       | ...

(oczywiście bez " / " s)

27

css css-position

Author: geronimo, 2011-02-18

Source

3 answers

Nie.

Możesz ustawić absolutnie, a następnie mieć kopię elementu wewnątrz sekcji z visible: none, ale absolutne pozycjonowanie z definicji sprawia, że jest to element "pływający", który nie wchodzi w interakcję z elementami nad nim.

Zakładając, że układ strony jest stały, możesz użyć padding-left: #px;, aby osiągnąć swój cel, ponieważ nie sądzę, aby względne pozycjonowanie było tym, czego chcesz.

Alternatywnie możesz użyć display: table-*, aby zmusić go do zachowania bardziej rygorystycznej formy bez wpływu na dokument struktura jak pokazano tutaj

Jednak w zależności od tego, czy chcesz, aby komórki były płynne, Możesz zmienić .section divs na display: table-row, Jeśli nie podoba ci się z góry określona konfiguracja szerokości i chcesz oddzielne .sekcja się ustawia.

1

Author: J V,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-18 14:40:27

W rzeczywistości można to zrobić łatwo i prosto za pomocą div. Wystarczy umieścić div z position: relative wewnątrz div wyświetlacza inline lub block. Ustaw jego szerokość i wysokość na taką samą, jak div zawierający. Wtedy znajdziesz można umieścić inny div absolutnie wewnątrz niego.

1

Author: Twmprys,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-29 15:58:52

score 47 · Accepted Answer

Gdy używasz position:absolute;, element jest usuwany z normalnego przepływu strony. W związku z tym nie wpływa już na układ jego elementu kontenera. Tak więc element kontenera nie bierze pod uwagę jego wysokości, więc jeśli nie ma nic innego do ustawienia wysokości, wtedy kontener będzie miał zerową wysokość.

Dodatkowo ustawienie display:inline-block; nie ma sensu dla elementu, który jest position:absolute;. Znowu dzieje się tak dlatego, że absolutne pozycjonowanie usuwa element z przepływu strony. Jest to sprzeczne z inline-block, który istnieje tylko po to, aby wpłynąć na to, jak element pasuje do przepływu strony. Wszystkie elementy position:absolute; są automatycznie traktowane jako display:block, ponieważ jest to jedyny logiczny tryb wyświetlania dla pozycjonowania bezwzględnego.

Jeśli potrzebujesz absolutnego pozycjonowania, jedynym rozwiązaniem problemu z wysokością jest ustawienie wysokości pojemnika.

Jednak podejrzewam, że można obejść się bez absolutnego pozycjonowania.

Wygląda na to, że to, co próbujesz zrobić, to Ustaw drugi <span> w każdym bloku do ustalonej pozycji w bloku, tak aby ustawił się w linii.

To klasyczny problem CSS. W" starych, złych czasach " projektanci stron internetowych zrobiliby to za pomocą tabeli ze stałymi szerokościami na komórkach tabeli. Oczywiście nie jest to odpowiedź dla dzisiejszych projektantów stron internetowych, ale jest to coś, co powoduje wiele pytań.

Istnieje wiele sposobów, aby to zrobić za pomocą CSS.

Najłatwiej jest ustawić zarówno <span> elementy na display:inline-block;, jak i daj im obu stałą szerokość.

Eg:

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

Z następującym CSS:

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

[edytuj] Po aktualizacji pytania

Oto jak osiągnę to, o co teraz prosisz:

<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>

Z następującym CSS:

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

Mała ilość dodatkowych znaczników, ale osiąga pożądany efekt.