Перекрытие HTML-разметки

Question

Я хотел бы иметь три числа (или слова или что-то еще) с двумя первыми, окруженными красным ящиком, а второй два окружен зеленой коробкой. Таким образом, поля будут перекрываться. Возможно ли это в html/css? У меня есть полулегальная попытка в фрагменте, который, надеюсь, проходит через то, что я хочу, хотя, конечно, это не сработает. Если возможно, я бы хотел избежать абсолютного позиционирования или чего-то подобного, поскольку я действительно хочу использовать эти элементы для разметки текста и планировать читать эту разметку позже.

.red { 
 
    border-style: solid; 
 
    border-color: red; 
 
    padding: 4px; 
 
} 
 
.green { 
 
    border-style: solid; 
 
    border-color: green; 
 
}

1 2 3        <br /><br /> 
 
<span class="red">1 2</span> 3  <br /><br /> 
 
1 <span class="green">2 3</span> <br /><br /> 
 
<span1 class="red"">1 <span2 class="green">2</span1> 3</span2>

Это примерно я хочу, чтобы выглядеть следующим образом:

Answer 1

Вы хотите намеренно разбить XML-формат на своем XHTML. И правильно ли браузер интерпретирует границы на элементах? Это было общее в тот же день с такими вещами, как <b class="red"">1 <u class="green">2</b> 3</u>, и вы увидите, что это «ближе» к тому, что вы хотите, но теперь браузеры заполняют эти пробелы в течение нескольких дней и заставляют использовать их при добавлении CSS. Таким образом, вам остается делать CSS-хаки ...

жаль, что кажется, что: первый тип и последний тип не любят быть добавлены к 2 классам, например .red.зеленый: первый в типа, так что я должен был добавить их в качестве first и last в классах

(Вы можете найти перекрытие, видя, какие элементы имеют оба класса)

 \t .numbersContainer { 
 
    \t position: relative; 
 
    \t margin: 12px; 
 
    \t } 
 
    \t .red { 
 
    \t border-top-style: solid; 
 
    \t border-bottom-style: solid; 
 
    \t border-color: red; 
 
    \t padding: 4px; 
 
    \t } 
 
    \t .green { 
 
    \t border-top-style: solid; 
 
    \t border-bottom-style: solid; 
 
    \t border-color: green; 
 
    \t } 
 
    \t .red.green:before { 
 
    \t content: " "; 
 
    \t position: absolute; 
 
    \t z-index: -1; 
 
    \t top: 0px; 
 
    \t left: 0px; 
 
    \t right: 0px; 
 
    \t bottom: 0px; 
 
    \t border-top-style: solid; 
 
    \t border-bottom-style: solid; 
 
    \t border-color: green; 
 
    \t padding: 4px; 
 
    \t } 
 
    \t .red.green { 
 
    \t position: relative; 
 
    \t border-top-style: solid; 
 
    \t border-bottom-style: solid; 
 
    \t border-color: red; 
 
    \t padding: 4px; 
 
    \t } 
 
    \t .numbersContainer .red:first-of-type { 
 
    \t border-left-style: solid; 
 
    \t } 
 
    \t .numbersContainer .red:last-of-type { 
 
    \t border-right-style: solid; 
 
    \t } 
 
    \t .numbersContainer .green:first-of-type { 
 
    \t border-left-style: solid; 
 
    \t } 
 
    \t .numbersContainer .green:last-of-type { 
 
    \t border-right-style: solid; 
 
    \t } 
 
    \t .first { 
 
    \t border-left-style: solid; 
 
    \t } 
 
    \t .last { 
 
    \t border-right-style: solid; 
 
    \t } 
 
    \t .red.green.first { 
 
    \t border-left-style: none; 
 
    \t } 
 
    \t .red.green.first:before { 
 
    \t border-left-style: solid; 
 
    \t } 
 
    \t .red.green.last { 
 
    \t border-right-style: solid; 
 
    \t } 
 
    \t .red.green.last:before { 
 
    \t border-right-style: none; 
 
    \t } 
 
    \t

<div class="numbersContainer"> 
 
    1 2 3 
 
</div> 
 
<div class="numbersContainer"> 
 
    <span class="red">1 2</span> 3 
 
</div> 
 
<div class="numbersContainer"> 
 
    1 <span class="green">2 3</span> 
 
</div> 
 
<div class="numbersContainer"> 
 
    <span class="red">1 </span><span class="red green first last">2</span><span class="green">3</span> 
 
</div> 
 
<div class="numbersContainer"> 
 
    <span class="red">1 </span><span class="red green first">2</span><span class="red green">3</span><span class="red green">4</span><span class="red green last">5</span><span class="green">6</span> 
 
</div>

Answer 2

Это возможно, но это не очень хороший стиль кодирования. Если вы измените текст, вы также должны изменить отступы и поля .green.

.red { 
 
    border-style: solid; 
 
    border-color: red; 
 
    padding: 4px; 
 
    width: 16px; 
 
} 
 
.green { 
 
    border-style: solid; 
 
    border-color: green; 
 
    padding: 2px 4px 2px 24px; 
 
    margin-left: -20px; 
 
}

<span class="red">1 2</span><span class="green">3</span>

Answer 3

Это ближайший я могу получить:

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    } 
 
body { 
 
    padding: 10px; 
 
    } 
 
body:hover { 
 
    background: blue; 
 
    transition: all 0.2s ease; 
 
    } 
 
.one { 
 
    border-color: red; 
 
    border-style: solid; 
 
    border-left-width: 2px; 
 
    border-top-width: 2px; 
 
    border-bottom-width: 2px; 
 
    border-right-width: 0; 
 
    background: #FFF; 
 
} 
 
.two { 
 
    background: #FFF; 
 
    border-top: 2px solid red; 
 
    border-bottom: 2px solid red; 
 
    border-right: 2px solid red; 
 
    outline: 2px solid green; 
 
    z-index: 2; 
 
} 
 
.three { 
 
    background: #FFF; 
 
    border-color: green; 
 
    border-style: solid; 
 
    border-left-width: 0; 
 
    border-top-width: 2px; 
 
    border-bottom-width: 2px; 
 
    border-right-width: 2px; 
 
    padding: 2px; 
 
    margin-left: 2px; 
 
    z-index: 10000; 
 
    outline: 2px #FFF solid; 
 
}

<span class="one">1</span><span class="two">2</span><span class="three">3</span>

Это также может быть возможным с помощью нескольких псевдо-элементов и абсолютное позиционирование, но есть это не решение, как вам нужно. Это вызвано типом XML (HTML является XML), что два элемента не должны перекрываться.

Answer 4

Вот чистый CSS решение:

span { 
 
    font: 1em monotype; 
 
    letter-spacing: 0.3em; 
 
    height: 1em; 
 
    vertical-align: middle; 
 
} 
 

 
span:before { 
 
    content: ""; 
 
    width: 1.5em; 
 
    padding: 0.5em; 
 
    height: 1em; 
 
    position: absolute; 
 
    margin-top: -0.4em; 
 
    margin-left: -0.5em; 
 
    border: 4px solid red; 
 
} 
 

 
span:after { 
 
    content: ""; 
 
    width: 2em; 
 
    height: 1.2em; 
 
    margin-left: -2.5em; 
 
    position: absolute; 
 
    border: 4px solid green; 
 
}

<span>1 2 3</span>

Answer 5

Exmaple Отрицательное значение маржинальной-хххх

.red { 
 
    border-style: solid; 
 
    border-color: red; 
 
    padding: 4px; 
 
    width: 30px; 
 
    display: inline-block; 
 
} 
 
.green { 
 
    border-style: solid; 
 
    border-color: green; 
 
    margin-left: -20px; 
 
    width: 15px; 
 
    z-index: -1; 
 
    display: inline-block; 
 
}

<div> 
 
    <div class="red">1 2</div> 
 
    <div class="green">3</div> 
 
</div>

Что я сделал: я сделал 2 встроенных блока (одна и та же строка), используйте отрицательный запас, чтобы получить 3 в 2 и 1 блок и поместите это все 1 наложение.

Answer 6

Вот решение CSS, которое остается вместе с горизонтальным и вертикальным содержимым разного размера и не использует позиционирование. Он использует границы CSS вместе с box-shadow, чтобы создать несколько границ. Затем отображается CSS: table-cell используется в div.

Использование стилей таблицы CSS для создания отношений между divs имеет несколько преимуществ. Если divs содержат различное количество контента, вертикальная высота каждого div будет соответствовать, и общий размер можно отрегулировать (текучесть% или фиксированный пиксель).

JSFiddle: http://jsfiddle.net/TalkingRock/da5b7h5L/

.table { 
 
    display: table; 
 
    width: 80%; 
 
} 
 
.table-row { 
 
    display: table-row: 
 
} 
 
div { 
 
    display: table-cell; 
 
    margin: 0; 
 
} 
 
.right { 
 
    border-top: 2px solid red; 
 
    border-right: 0px solid red; 
 
    border-bottom: 2px solid red; 
 
    border-left: 2px solid red; 
 
    padding: 4px; 
 
    box-shadow: 0px 0px 0px 2px red; 
 
} 
 
.center { 
 
    padding: 4px; 
 
    border-top: 2px solid green; 
 
    border-right: 0px solid green; 
 
    border-bottom: 2px solid green; 
 
    border-left: 2px solid green; 
 
    box-shadow: 2px 0px 0px 2px red; 
 
} 
 
.left { 
 
    border-top: 2px solid green; 
 
    border-right: 2px solid green; 
 
    border-bottom: 2px solid green; 
 
    border-left: 0px solid green; 
 
    padding: 7px; 
 
}

<div class="table"> 
 
    <div class="table-row"> 
 
    <div class="right"> 
 
     Here is a line of text 
 
    </div> 
 
    <div class="center"> 
 
     <p>Paragraph 1 - Pellentesque habitant morbi tristique.</p> 
 
     <p>Paragraph 2 - Maecenas semper facilisis diam. Phasellus placerat ante vitae dolor ornare sodales.</p> 
 
    </div> 
 
    <div class="left"> 
 
     <img src="http://i.imgur.com/abMA5gE.gif" /> 
 
    </div> 
 
    </div> 
 
</div>