Я хочу выровнять <div>b по <div>по горизонтали, есть ли простой способ сделать это? - PullRequest
Новая
       13

Я хочу выровнять <div>b по <div>по горизонтали, есть ли простой способ сделать это?

1 голос
/ 11 ноября 2009

Когда я пишу <div name="a">Foo</div><div name="b">bar</div>, я хочу горизонтальное выравнивание вместо вертикального выравнивания. Как это сделать? Есть ли простой способ сделать это? По умолчанию это вертикальное выравнивание.

Ответы [ 8 ]

4 голосов
/ 11 ноября 2009

Установить div для встроенного блока: 

.a, .b {
  display: inline-block;
}

Предполагается, что элементы с классами из a и b, а не именами , как в опубликованном вами HTML. С помощью этого метода вы также можете выровнять элементы по вертикали, используя свойство vertical-align, т.е. выровняйте по верху, по середине или снизу: 

+---+
|   | +---+
| A | | B |
|   | +---+
+---+
2 голосов
/ 11 ноября 2009

Режим отображения по умолчанию для div - это «block», который включает в себя разрыв строки до и после div. Если вы не хотите разрывов строк, вы можете изменить свойство display на встроенное, которое должно выравнивать их по горизонтали, если в родительском элементе достаточно ширины, чтобы содержать оба элемента div.

Показать свойства: http://www.w3schools.com/css/pr_class_display.asp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<div style="width:510px; background-color:#ffee88;">
   <div style="display:inline; background-color:#ffeeff;">
      check check 1 2
   </div>
   <div style="display:inline; background-color:#eeffff;">
      hello this time
   </div>
</div>
</html>
1 голос
/ 11 ноября 2009

Вы можете использовать тег SPAN , чтобы обернуть элементы Foo и bar, или вы можете установить атрибут CSS 'display' для каждого элемента div как 'inline-block'. 

<div name="a" style="display:inline-block">Foo</div>
<div name="b" style="display:inline-block">bar</div>
1 голос
/ 11 ноября 2009

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

<div style="float:left;" name="a">Foo</div><div style="float:left;" name="b">bar</div>

Кроме того, вы можете установить ширину каждого div: 

<div style="float:left;width:30%;" name="a">Foo</div><div style="float:left;width:70%;" name="b">bar</div>
0 голосов
/ 11 ноября 2009

Дано: 

<div id='someSectionOfMyPage'>
   <div name="a">Foo</div>
   <div name="b">bar</div>
</div>

Добавить в таблицу стилей: 

#someSectionOfMyPage div {
  display: inline-block;
}

Проверьте в этих примерах также о позиционировании CSS.

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #logo
        {
            background: #000000;
            position: absolute;
            left: 0px;
            top: 0px;
            width: 250px;
            height: 200px;
        }
        #Banner
        {
            background: #1071A6;
            position: absolute;
            left: 250px;
            top: 0;           
            width: 850px;
            height: 250px;
        }
    </style>
</head>
<body>
    <div id="logo">
    </div>
    <div id="Banner">
    </div>
</body>
</html>
0 голосов
/ 11 ноября 2009

Это должно сделать это: 

<div name="a" style="float:left; width: 100px;">Foo</div>
<div name="b"  style="float:left; width: 100px;">bar</div>
<div style="clear:both"></div>
0 голосов
/ 11 ноября 2009

Они не демонстрируют "вертикальное выравнивание", это блочные элементы против встроенных элементов .

Простой ответ: используйте SPAN , а не DIV

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

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

...