Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
linkoln_737
19 / 19 / 13
Регистрация: 19.03.2013
Сообщений: 423
1

Положение текстовых полей внутри блока

24.03.2015, 14:27. Просмотров 322. Ответов 4
Метки нет (Все метки)

Здравствуйте,у меня есть блок container и в нем 9 текстовых полей,помогите пожалуйста их разместить так же как на картинке,начал,но что то не получилось.заранее спасибо
HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="container">
    <input type="text" id="t1" />
    <input type="text" id="t2" />
    <input type="text" id="t3" />
    <input type="text" id="t4" />
    <input type="text" id="t5" />
    <input type="text" id="t6" />
    <input type="text" id="t7" />
    <input type="text" id="t8" />
    <input type="text" id="t9" />
</div>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
#container
{
    width:100%;
    height:100%;
    border:1px double black;
}
#t1
{ float:left;}
#t2
{ }
#t3
{float:right; }
0
Миниатюры
Положение текстовых полей внутри блока  
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.03.2015, 14:27
Ответы с готовыми решениями:

Внутри родительского блока сделать отступ дочернего блока сверху автоматически
Здравствуйте, как с помощью css внутри родительского блока сделать отступ дочернего блока сверху...

Смещение внутри блока, другого блока, без изменения первого
Возможно ли такое? Есть блоки &lt;ul id=&quot;navigation&quot;&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;div...

Выравнивание блока footer внутри другого блока
Подскажите пожалуйста, как убрать разрыв между блоком Footer и div'ом cont. &lt;article&gt; &lt;div...

Положение блока
&lt;html&gt; &lt;head&gt; &lt;link rel=&quot;shortcut icon&quot; href=&quot;./images/favicon_jfk2.png&quot;...

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

4
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
24.03.2015, 15:35 2
Можно так.
HTML5
1
2
3
4
5
6
7
8
<table class="container">
    <tbody>
        <tr><td><input type="text" id="t1" /></td><td><input type="text" id="t2" /></td><td><input type="text" id="t3" /></td></tr>
        <tr><td><input type="text" id="t4" /></td><td><input type="text" id="t5" /></td><td><input type="text" id="t6" /></td></tr>
        <tr><td><input type="text" id="t7" /></td><td><input type="text" id="t8" /></td><td><input type="text" id="t9" /></td></tr>
        
    </tbody>        
    </table>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.container
{
    width:100%;
    height:100%;
    border:1px double black;
}
.container tr td:nth-child(3n){
    text-align:right;
}
.container tr td:nth-child(2n){
    text-align:center;
}
.container tr:nth-child(n) td{
    vertical-align:top;
}
.container tr:nth-child(2n) td{
    vertical-align:middle;
}
.container tr:nth-child(3n) td{
    vertical-align:bottom;
}
0
linkoln_737
19 / 19 / 13
Регистрация: 19.03.2013
Сообщений: 423
24.03.2015, 16:06  [ТС] 3
Shakalaka, а без таблиц можно?
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
24.03.2015, 16:15 4
Можно position absolute для каждого блока и вручную назначить координаты, можно и через float.
CSS
1
2
3
4
5
6
#t1
{ float:left;}
#t2
{ float:right;}
#t3
{ display:block; margin:0 auto;}
И так для каждого ряда блоков.
А чем плохи таблицы? Судя по рисунку нужно равномерно распределить блоки. Это похоже на таблицу. А если что-то похоже на таблицу и ведет себя как таблица, то наверно, это таблица
0
linkoln_737
19 / 19 / 13
Регистрация: 19.03.2013
Сообщений: 423
24.03.2015, 16:17  [ТС] 5
Shakalaka, проблема в том,что это описания полей используется для динамически созданных полей,и их оборачивать в таблицу не очень удобно будет,
0
24.03.2015, 16:17
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.03.2015, 16:17

Положение блока
Здравствуйте! У меня есть маленькая проблема: не могу сменить положение значка-блока (домик). Что...

Зафиксировать положение блока
&lt;div id=&quot;content&quot;&gt; &lt;div style=&quot;float: left; width: 400px;&quot;&gt; text &lt;/div&gt; &lt;div...

Положение блока на экране
В общем как ни странно не выходит сделать правильное положение блока div. а именно интерисует...


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

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

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