Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Разнести 2 inline-block div-а по разным сторонам? / 12 сообщений из 12, страница 1 из 1
02.10.2014, 17:00
    #38765126
NDAleksey
NDAleksey
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разнести 2 inline-block div-а по разным сторонам?
Как убрать расстояние отмеченное красными кружками?

Код: html
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.
55.
56.
<style type="text/css">
    html {
        width: 1024px;
        margin: 0 auto;
        background-color: black;
    }

    body {
        font-family: "Comic Sans MS";
        width: 700px;
        margin: 0 auto;
        background-color: darkgrey;
    }

    .messageBox {
        color: navy;
        background-color: #999999;
        border-color: darkorange;
        border-width: 1px;
        border-style: dashed;
    }

    .question, .answer {
        width: 300px;
        display: inline-block;
        padding: 5px;
    }

    .question {
        background-color: #7fe4ff;
        border-radius: 10px;
        margin-top: 0px;
        vertical-align: top;
    }

    .answer {
        background-color: #95ff7a;
        border-radius: 10px;
        vertical-align: bottom;
        right: 0px;
    }
</style>
<body>
    <div class="messageBox">
        <div class="question"><br/><br/><br/></div>
        <div class="answer"><br/><br/><br/><br/></div>
    </div>
    <div class="messageBox">
        <div class="question"><br/><br/><br/><br/></div>
        <div class="answer"><br/><br/></div>
    </div>
    <div class="messageBox">
        <div class="question"><br/><br/><br/></div>
        <div class="answer"><br/><br/><br/></div>
    </div>
</body>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.10.2014, 17:42
    #38765201
SharuPoNemnogu
SharuPoNemnogu
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разнести 2 inline-block div-а по разным сторонам?
NDAleksey,

float?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.10.2014, 17:49
    #38765205
brbrbr
brbrbr
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разнести 2 inline-block div-а по разным сторонам?
У тебя ширина контейнера - 700, внутренних блоков - 300. Надо либо размер контейнера уменьшить, либо размер блоков увеличить.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.10.2014, 19:51
    #38765357
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разнести 2 inline-block div-а по разным сторонам?
NDAleksey,
 
через таблицу проще
Код: html
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.
55.
56.
57.
58.
59.
60.
61.
62.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
	width:1024px;
	margin:0 auto;
	background-color:black;
}
body {
	font-family:"Comic Sans MS";
	width:700px;
	margin:0 auto;
	background-color:#A9A9A9;
}
table {
	border-collapse:collapse;
	border:1px dashed #FF8C00;
	width:100%;
}
td {
	border-top:1px dashed #FF8C00;
	vertical-align:top;
}
td+td {vertical-align:bottom;}
.question, .answer {
	width:300px;
	padding:5px;
}
.question {
	background-color:#7fe4ff;
	border-radius:10px;
}
.answer {
	background-color:#95ff7a;
	border-radius:10px;
	float:right;
}
</style>
</head>
<body>
<table>
	<tr>
		<td><div class="question"><br/><br/><br/></div></td>
		<td><div class="answer"><br/><br/><br/><br/></div></td>
	</tr>
	<tr>
		<td><div class="question"><br/><br/><br/><br/></div></td>
		<td><div class="answer"><br/><br/></div></td>
	</tr>
	<tr>
		<td><div class="question"><br/><br/><br/></div></td>
		<td><div class="answer"><br/><br/><br/></div></td>
	</tr>
<table>
</body>

<script>
</script>

</body>
</html>

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 10:25
    #38765677
NDAleksey
NDAleksey
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разнести 2 inline-block div-а по разным сторонам?
SharuPoNemnoguNDAleksey,

float?

покажите!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 10:26
    #38765678
NDAleksey
NDAleksey
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разнести 2 inline-block div-а по разным сторонам?
brbrbrУ тебя ширина контейнера - 700, внутренних блоков - 300. Надо либо размер контейнера уменьшить, либо размер блоков увеличить.

а если я хочу, чтобы блоки отстояли друг от друга и никак иначе, что тогда?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 10:27
    #38765682
NDAleksey
NDAleksey
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разнести 2 inline-block div-а по разным сторонам?
user89NDAleksey,
через таблицу проще

знаю, но дело принципа!)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 11:12
    #38765757
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разнести 2 inline-block div-а по разным сторонам?
NDAlekseyзнаю, но дело принципа!)
Зачем вы так убиваетесь? Вы же так не убъетесь!!! (с)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 12:01
    #38765850
NDAleksey
NDAleksey
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разнести 2 inline-block div-а по разным сторонам?
krvsaNDAlekseyзнаю, но дело принципа!)
Зачем вы так убиваетесь? Вы же так не убъетесь!!! (с)

зато я пробовал) просто скажите - это невозжомно? если да, то я умываю руки)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 13:15
    #38766011
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разнести 2 inline-block div-а по разным сторонам?
NDAlekseyпросто скажите - это невозжомно?
Вот смотри...
У тебя явно табличный вывод - строки и две колонки...
Сами блоки на право и налево можно расставить, сделав их плавающими, левым и правым...
Но!
Они у тебя ещеи располагаются по вертикали, один вверху, другой внизу. Да еще высоту они ммеют "по контенту"...

Все прямо кричит - ЭТО ТАБЛИЦА! ТОЛЬКО В НЕЙ ТАКОЕ ДЕЛАЕТСЯ БЕЗ ПРОБЛЕМ!!!

Но тебе это видать не слышно - тебе нужно как-то иначе...
Остается вариант для маньяков - сделать все ДИВами, но дать им табличные свойства display:
- table
- table-row
- table-cell
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 13:21
    #38766022
NDAleksey
NDAleksey
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разнести 2 inline-block div-а по разным сторонам?
krvsaNDAlekseyпросто скажите - это невозжомно?
Вот смотри...


ну я просто версткой не занимаюсь, где-то лет 7 незад услышал, что таблица - зло для мобильных устройств, вот и избегаю таблицу) ну раз это не так, то ок, спасибо)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2014, 13:32
    #38766042
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Разнести 2 inline-block div-а по разным сторонам?
NDAlekseyгде-то лет 7 незад услышал, что таблица - зло для мобильных устройств
Опа!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Разнести 2 inline-block div-а по разным сторонам? / 12 сообщений из 12, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 384ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1446660]:
 0ms
get settings:
 8ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 54ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 62ms
get tp. blocked users:
 1ms
others: 216ms
total:  384ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]