Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Shoshona
28 / 28 / 37
Регистрация: 03.06.2014
Сообщений: 960
1

Два span в виде двух колонок

28.02.2017, 14:55. Просмотров 159. Ответов 6
Метки нет (Все метки)

Здравствуйте!
HTML5
1
2
3
4
<span id="first_cols">Vorname: </span><span id="first_name"></span>
<span id="first_cols">Nachname: </span><span id="last_name"></span>
<span id="first_cols">StraГџe: </span><span id="address1"></span>
<span id="first_cols">Nr.: </span><span id="number_address"></span>
Как мне задать фиксированную ширину span id="first_cols" чтобы вторые span были ровными слева, но шли после самого широкого первого спана?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.02.2017, 14:55
Ответы с готовыми решениями:

Номера колонок таблицы при использовании row/col+span
Прошу помочь с моим дурдомом. Таблица 6 колонок. thead + tbody + tfoot. (Всё...

<span align="left"> Заявитель: Фамилия </span> <span align="right">_____</span><br>
Какие теги использовать и как чтоб фраза Заявитель: Фамилия И.О. была слева...

Выравнивание двух span по центру div с display:flex
Доброго времени суток, Что-то никак не пойму, как выравнять два элемента,...

Верстка двух колонок
Подскажите в чем моя ошибка? Пытаюсь сверстать 2 колонки, но меню наползает на...

Страница из двух колонок адаптивной верстки
Есть адаптивная верстка состоящая примерно таким образом: &lt;div class=&quot;row&quot;&gt;...

6
aj17
282 / 272 / 154
Регистрация: 02.06.2014
Сообщений: 1,017
28.02.2017, 15:03 2
во первых так делать нельзя, атрибут id может быть один на страницу!
HTML5
1
2
3
4
<span id="first_cols">Vorname: </span><span id="first_name"></span>
<span id="first_cols">Nachname: </span><span id="last_name"></span>
<span id="first_cols">StraГџe: </span><span id="address1"></span>
<span id="first_cols">Nr.: </span><span id="number_address"></span>
Правильно делать так:
HTML5
1
2
3
4
<span class="first_cols">Vorname: </span><span class="first_name"></span>
<span class="first_cols">Nachname: </span><span class="last_name"></span>
<span class="first_cols">StraГџe: </span><span class="address1"></span>
<span class="first_cols">Nr.: </span><span class="number_address"></span>
во вторых, что бы сделать фиксированные строчные элементы, нужно их превратить в блочные, присвоив им свойство
CSS
1
span{display: block;}
Ну а ширины width, сами думаю дадите, что бы расположить их горизонтально можно использовать свойство float: left;
0
Shoshona
28 / 28 / 37
Регистрация: 03.06.2014
Сообщений: 960
28.02.2017, 15:07  [ТС] 3
Цитата Сообщение от aj17 Посмотреть сообщение
превратить в блочные, присвоив им свойство
У меня стоит inline-block
Цитата Сообщение от aj17 Посмотреть сообщение
атрибут id может быть один на страницу!
почему?
0
aj17
282 / 272 / 154
Регистрация: 02.06.2014
Сообщений: 1,017
28.02.2017, 15:15 4
Цитата Сообщение от Shoshona Посмотреть сообщение
атрибут id может быть один на страницу!
почему?
Потому что id делает уникальным тот блок/элемент которому он присвоен, обычно это нужно для работы скриптов, в css старайтесь избегать использование селекторов по id. Для группировки элементов принято использовать class, они могут быть одинаковые, используйте сколько хотите...
0
Shoshona
28 / 28 / 37
Регистрация: 03.06.2014
Сообщений: 960
28.02.2017, 15:20  [ТС] 5
aj17, учту.
Что бы я не делал не могу спану поставить фиксированную длину. могу поставить padding, но это не то. Мне нужно выровнять два спана в каждом ряду по левому краю, но чтобы они шли как две ровные колонки
0
aj17
282 / 272 / 154
Регистрация: 02.06.2014
Сообщений: 1,017
28.02.2017, 15:21 6
Скопируйте целиком, может поможет разобраться.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    *{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .column_span_item{
        display: block;
        float: left;
        width: 200px;
    }
    
    span{
        border: 1px solid #ccc;
        height: 44px;
        font: 16px/24px Arial;
        padding: 10px;
    }
    
    .column_row_item:after{
        content: ' ';
        display: block;
        clear: both;
    }
</style>
<body>
    <div class="column_row_item">
        <span class="column_span_item first_cols">Vorname: </span>
        <span class="column_span_item first_name">123</span>
    </div>
    <div class="column_row_item">
        <span class="column_span_item first_cols">Nachname: </span>
        <span class="column_span_item last_name">123</span>
    </div>
    <div class="column_row_item">
        <span class="column_span_item first_cols">StraГџe: </span>
        <span class="column_span_item address1">123</span>
    </div>
   
    <div class="column_row_item">
        <span class="column_span_item first_cols">Nr.: </span>
        <span class="column_span_item number_address">123</span>
    </div>
   
</body>
</html>
0
iVKO
24 / 24 / 13
Регистрация: 04.02.2015
Сообщений: 96
28.02.2017, 15:46 7
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="table">
  <div class="row">
    <span class="first_cols">Vorname: </span>
    <span class="first_name">11</span>
  </div>
  <div class="row">
    <span class="first_cols">Nachname: </span>
    <span class="last_name">22</span>
  </div>
  <div class="row">
    <span class="first_cols">StraГџe: </span>
    <span class="address1">33</span>
  </div>
  <div class="row">
    <span class="first_cols">Nr.: </span>
    <span class="number_address">44</span>
  </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.table {
  display: table;
}
.row {
  display: table-row;
}
span {
  display: table-cell;
}
.first_cols {
  padding: 4px 8px;
  text-align: right;
}
Вот это должно помочь разобраться.
1
28.02.2017, 15:46
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
28.02.2017, 15:46

Расположение двух колонок с контентом FlexBox
Здравствуйте, нужна помощь по такой теме: есть две колонки, где в первой всего...

Двух колоночный сайт с адаптивной высотой колонок
Здравствуйте. Хочу сделать двух колоночный сайт но столкнулся с одной...

Span и p
Здравствуйте! Возможно-ли объединить &lt;p align=center&gt; и &lt;span id=&quot;&quot;&gt; (тег в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru