Рисование пустых встроенных блоков в CSS? - PullRequest
Новая
       12

Рисование пустых встроенных блоков в CSS?

7 голосов
/ 17 ноября 2009

Я уверен, что это очень просто, но я пытаюсь нарисовать набор маленьких, пустых встроенных блоков в HTML, как показано ниже: 

<span style="border:1px solid black;height=10px;width=17px"></span>

Раньше раньше делали простые изображения .gif, но выглядели нечетко, так как дисплеи браузеров увеличивались или уменьшались.

<span> однако являющийся встроенным элементом не учитывает свойства height и width. И, конечно, использование <div style="display:inline;... демонстрирует то же поведение в том смысле, что оно не учитывает эти свойства.

Можете ли вы предложить CSS'y способ?

Обновление Предположим следующее: если я плаваю, он будет связываться справа или слева от текста, и мне нужно, чтобы он был встроен в текст в зависимости от ширины браузера, & c 
<p>Lorem ipsum dolor sit amet, <INSERT BOX HERE> consectetur adipisicing 
elit, <INSERT OTHER BOX HERE> sed do eiusmod tempor incididunt ut labore et 
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>

Ответы [ 10 ]

12 голосов
/ 17 ноября 2009

height и width могут применяться только к элементам со свойством hasLayout . Элемент SPAN по умолчанию не реализует это свойство.

Поскольку встроенный блок не работает корректно во всех основных браузерах, я бы рекомендовал использовать трюк с отступом: 

<span style="font-size:30px; padding-left:30px; background:red;">&nbsp;</span>

Возможно, вам придется немного поиграть с измерениями, потому что глобальные font-size, font-family и line-height могут повлиять на реальный размер вашего бокса.

Edit: Рисование пустых полей - это то, что я пропустил, но я думаю, что это все равно очевидно из моего кода. Если нет, то это еще один пример: 

<style type="text/css">
.box1 { font-size:15px; font-family:Tahoma; padding-left:15px; border:1px solid red; overflow:hidden; }
.box2 { font-size:10px; font-family:Tahoma; padding-left:15px; border:1px solid green; overflow:hidden; }
.box3 { font-size:5px; font-family:Tahoma; padding-left:5px; border:1px solid blue; overflow:hidden; }
</style>

This is red box: <span class="box1">&nbsp;</span> and this is green box: <span class="box2">&nbsp;</span>.
And this is another box, this time it is blue: <span class="box3">&nbsp;</span>.

И этот код выдает это как вывод: альтернативный текст http://img413.imageshack.us/img413/5865/boxes.png

И поскольку мы помещаем &nbsp; внутри каждого диапазона, этот прием будет работать во всех браузерах.

5 голосов
/ 17 ноября 2009

Вы можете попробовать параметр отображения css inline-block. Но ваш пробег может варьироваться в зависимости от этого.

display: inline-block

Встроенный блок помещается в строку (т. Е. на той же строке, что и соседний контент), но он ведет себя как блок.

3 голосов
/ 21 июня 2012

Ответы других людей включали правильный синтаксис встроенного стиля, но я подумал, что укажу это явно:

Ваши оригинальные правила стиля выглядят так: 

    <span style="border:1px solid black;height=10px;width=17px"></span>

Что должно выглядеть так: 

    <span style="border:1px solid black;height:10px;width:17px"></span>

Знаки равенства не принадлежат такому синтаксису css, для этого нужны двоеточия.

Это, наряду с display:inline-block на пролете, как предлагали другие, сработало для меня. Как это: 

    <span style="border:1px solid black;height:10px;width:17px;display:inline-block;"></span>
3 голосов
/ 18 ноября 2009

Много хороших предложений на этой странице. Мне интересно, однако, когда вы пытались использовать GIF, была ли граница частью вашей графики?

Как насчет использования прозрачного GIF 1x1, который можно изменить с помощью CSS, а затем применить border:1px solid black к изображению. Если бы вы попытались добавить рамку как часть изображения, я понимаю, что растягивание делает ее нечеткой. Но прозрачный GIF с рамкой CSS должен выглядеть достаточно красиво, если только у вас нет других стилей, которые вам нужны ...

Удачи!

3 голосов
/ 17 ноября 2009

Вы можете использовать display: inline-block. Хотя это не будет работать в старых браузерах, таких как IE 6.

В зависимости от того, где вы хотите расположить предметы, вы можете сделать display:block; float:[left or right]

2 голосов
/ 18 ноября 2009

Вы правы, span не учитывает ширину и высоту, тем не менее, он выполняет своего рода отступы.

Вы можете легко установить ширину вашего бокса, добавив в него левую и / или правую отступы.

Высота немного сложнее, так как кажется, что пустой интервал имеет высоту, поэтому вам нужно установить размер шрифта равным 0. 

span.box {
    padding: 5px 8px;    // height 10, width 16
    font-size: 0px;
}

И, конечно, он не работает в IE7 (и, вероятно, IE6), по крайней мере, в режиме совместимости с IE7, поле волшебным образом исчезает, когда оно пустое, и не показывает нижнюю границу, когда я помещаю в него неразрывный пробел ( который все равно портит ширину) ...

1 голос
/ 16 июня 2012

Кажется, что width: 17px не работает с элементами inline или inline-block. Но, в свою очередь, почему бы не делать трюки с блочными элементами и не показывать их как встроенные элементы через float: left?

Вот что я пробовал: 

<html>
<head>
<style>
.container div {
    float: left;
    height: 20px;
}
</style>
</head>
<body>
<div class='container'>
    <div style='width: 20px; border: 1px solid red;'></div>
    <div>Text</div>
    <div style='width: 20px; border: 1px solid red;'></div>
</div>
<div style='clear: both'></div>
1 голос
/ 18 ноября 2009

Я считаю, что это работает. 

 <span style="display:inline-block;border:1px solid #00ff00;width:150px;height:50px;"></span>

уверен, что он будет работать в кросс-браузерном режиме

0 голосов
/ 22 января 2018

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

Просто определите таблицу ... 

   <table>
       <tr>
           <td id=one></td><td id=two></td><td id=three></td>
       </tr>
   </table>

Затем отформатируйте данные таблицы, используя ваш .css, вот так ... 

    tr{  height: 60px;}
    th, td{ width: 100px;}
    #one{   border:10px solid blue;}
    #two{   border:10px solid red;}
    #three{ border:10px solid green;}

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

0 голосов
/ 17 ноября 2009

Как насчет 

<div>
    <div style="border: 1px solid #000; height: 10px; width: 17px; float: left"></div>
    <div style="border: 1px solid #000; height: 10px; width: 17px; float: left"></div>
    <br style="clear: both;" />
</div>
...