CSS выравнивание тегов div, которые образуют рамки вокруг букв - PullRequest
Новая
       1

CSS выравнивание тегов div, которые образуют рамки вокруг букв

1 голос
/ 02 марта 2012

Я пытаюсь создать шаблон, показывающий три буквы или слова в коробках одинакового размера, и коробки соединены и разных цветов. Я наконец-то добился этого с помощью этих элементов стиля "display: inline; float: left;". Но теперь, когда я пытаюсь поместить текст до или после него, или помещаю два из этих наборов блоков на одном экране, все сводится с ума.

Образец: http://jsfiddle.net/cmjmb/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.test {
    border: 1px solid black;
    align: center;
    padding: 10px;
    width: 50px;
    font - size: 300 % ;
}
div.boxtype1 {
    background - color: #2BFFE3;display:inline;float:left;
}
div.boxtype2
{
background-color:# 00806F;
    display: inline;
    float: left;
}
</style>
</head>

<body>
Before
<div class='test boxtype1'>A</div>
<div class='test boxtype1'>B</div>
<div class='test boxtype2'>C</div>
After
<br /><br />

Before
<div class='test boxtype1'>A</div>
<div class='test boxtype1'>B</div>
<div class='test boxtype2'>C</div>
After
<br /><br />

</body>
</html>

Ответы [ 3 ]

3 голосов
/ 02 марта 2012

Поместите эти текстовые узлы внутри тега, например, <p>.Вы можете просто использовать display: inline-block для div и p:

http://jsfiddle.net/elclanrs/cmjmb/4/

2 голосов
/ 02 марта 2012

Используя float: left, вы убираете блоки из обычного потока элементов, они «плавают» влево, а обычный текст плавает вокруг них. Вероятно, это не то, что вы хотели.

Если вы просто пропустите float: left, это будет больше похоже на то, что вы описали. Тем не менее, между коробками есть место. Это обычный пробел, который вставляется между двумя словами. Вы можете избежать этого, написав три div в одной строке - без пробелов между ними.

0 голосов
/ 02 марта 2012

Или вы можете использовать: 

br { clear: both;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...