Обрезка CSS-обводки с заполнением

Question

У меня есть довольно неприятная проблема. Мне нужно сделать «таблицу», которая содержит 3 элемента рядом друг с другом. Первые 2 элемента - простые div, плавающие слева, но третий немного сложнее. Он должен иметь прокладку с каждой стороны. Кстати, это текст, который можно обернуть концом строки. Моя проблема заключается в том, что когда этот элемент разбивается в конце первой строки, а начало второй строки не имеет атрибутов заполнения.

Я здесь сделал simple example page.

Есть ли у вас решения для меня? Я пробовал так много разных способов ... Когда пространство рядом с третьим элементом пустое, все в порядке, но когда я довожу, что ящики полностью сломаны.

Answer 1

Ben, Я не понимаю, почему вы использовали бы два пролета, обернутые вокруг одного и того же элемента. Кроме того, я редко использую промежутки из-за их непостоянства. Из того, что я понимаю, вы хотите, чтобы 3 блока сидели бок о бок с последним элементом, который немного подбивался.

Я бы предложил просто добавить дополнительный класс в padded div (или id).

Попробуйте это ...

[HTML]

<h2>double span with floated elements next to it</h2> 
<div class="box">box #1</div> 
<div class="box">box #2</div> 
<div class="box boxPadded"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet. 
</div> 
<div class="cleaner"></div> 

[CSS]

.cleaner{clear: left; line-height: 0; height: 0;} 
.box{margin-right: 5px; width: 100px; min-height: 25px; float: left;} 
.boxPadded{padding: 3px 3px 9px 3px; word-wrap: break-word;} 

Итак, теперь третий элемент имеет атрибуты класса "коробки", а так как это отдельный атрибут «boxPadded».

«Минимальная высота» в основном для третьего элемента. Вы можете положить его в класс boxPadded, но я немного ленив. Это позволит элементу растягиваться долго, если текст больше элемента.

«Чистое» - это то, что я использую после того, как поплаваю элементы. Его «обычно не требуется, если у вас нет элементов в плавающем элементе.

«Слово-обертка» позволит использовать непрозрачную строку, которая больше, чем элемент для обертывания.

Answer 2

Вам нужна ширина, чтобы быть динамичной или ее можно фиксировать по размеру? Я бы удалял пролеты, плавал div.inner и hardcode его ширину. Что-то вроде этого:

.container { 
    overflow: hidden; 
} 

.inner { 
    float: left; 
    padding: 7px; 
    width: 106px; /* you could use percentages to fix the widths if you'd like to keep things dynamic. */ 
} 

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

Вы также могли бы выразить это в виде вложенного списка, как это лучше всего, чтобы избежать ненужных дивы:

<ol id="examples_list"> 
    <li> 
    <ul class="container"> 
     <li class="box">...</li> 
     <li class="box">...</li> 
     <li class="inner">...</li> 
    </ul> 
    </li> 
</ol> 

с ...

#examples_list, #examples_list ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

стиль его аналогичным образом.

Answer 3

Хорошо, на основании ответа @b_benjamin на комментарий выше, я думаю, что у меня может быть одно возможное решение, но я также думаю, что он будет полагаться на некоторый CSS, который может плохо воспроизводиться в старых браузерах, но это простая концепция, которая может вероятно, можно настроить с помощью других трюков.

Это, похоже, работает в последних версиях FF, Chrome и IE9.

Во-первых, HTML:

<div style="width:340px;"> 
    <!-- a list of text, with some time's marked up --> 
    <ul class="sched"> 
     <li><b>17:55</b><b>18:10</b> <a href="#">Lorem ipsum dolor</a> sit posuere.</li> 
     <li><b>18:20</b><b>18:30</b> <a href="#">Lorem ipsum dolor</a> sit amet orci aliquam.</li> 
     <li><b>18:20</b><b>18:30</b> <a href="#">Class aptent</a> taciti sociosqu ad sed ad.</li> 
     <li><b>19:05</b><b>19:17</b> <a href="#">Mauris et urna et</a> ante suscipit ultrices sed.</li> 
     <li><b>19:05</b><b>19:17</b> <a href="#">Proin vulputate pharetra tempus.</a> Quisque euismod tortor eget sapien blandit ac vehicula metus metus.</li> 
    </ul> 
</div> 

Теперь некоторые CSS: (я использовал простую цветовую схему, основанную на образце фото b_benjamin в)

/* reset default list styles */ 
.sched, .sched li{ 
    list-style:none; 
    font-size:14px; 
    padding:0; 
    margin:0; 
} 
.sched li{ 
    position:relative; 
    padding:0 10px; 

    margin:10px 0; 
    background:#631015; 
    color:#FFF; 
} 
.sched b{ 
    position:relative; 
    left:-10px; 
    display:inline-block; 

    padding:2px 10px; 
    font-weight:none; 
    background:#FFF; 
    color:#666; 

} 
/* some light styling for effect */ 
body{ 
    background:#cc222c; 
} 
.sched li a{ 
    color:#FF9; 
} 

Объяснение:

box model r эквивалент некоторого мыслительного процесса о том, как достичь заполнения на встроенных элементах (текст). Одна вещь, которую вы можете сделать, - просто наложить на всю коробку.

В моей концепции я использовал список UL, и каждый элемент LI является контейнером. Я использовал отступы 10px на контейнере.

.sched li{ 
    padding:0 10px; 
} 

Это даст нам наше дополнение, но это приведет к тому, что наши элементы времени также будут иметь это дополнение. Мой «трюк», чтобы «исправить» это, используя отрицательное относительное положение, равное отступов:

.sched b{ 
    display:inline-block; /* make these items act like block level elements */ 
    position:relative; /* give the b elements a relative position*/ 
    left:-10px; /* offset them equal to the padding */ 
} 

Там одна последняя вещь, чтобы сделать, и это, чтобы убедиться, что родительский элемент также является позиция: относительная так ребенка элемент будет использовать его размеры:

.sched li{ 
    position:relative; /* needed for B elements to be offset properly */ 
    padding:0 10px; 
} 

Вот отрезок от того, как он выглядит на Chrome.

Вы можете, конечно, играть с набивкой. Вероятно, есть также некоторые решения, чтобы элементы «B» плавали, но это, казалось, работало хорошо.

Я надеюсь, что это поможет!