Как разместить два деления рядом с помощью CSS

Question

Как разместить два деления рядом с помощью CSS

0

У меня есть две div на моей странице, и я хочу отображать их бок о бок. Я попытался использовать float:left и display:inline-block, но он не работает.

Может ли кто-нибудь помочь? Это то, что моя страница выглядит как скрипка

seun 20 март 2014, в 16:23

Источник

1

Возьмите <p><h3>OR</h3></p> ... ДЕМО ЗДЕСЬ
Ruddy 20 март 2014, в 15:22
0

чтобы добавить к комментарию @Ruddy's Ruddy, вы также можете заключить эту строку (с помощью OR ) в div и добавить ее тоже.
webeno 20 март 2014, в 15:24
0

@ruddy@webno ruddy @ruddy@webno webno Спасибо, это работает!
seun 20 март 2014, в 15:40

Показать ещё 1 комментарий

Теги:

html

css

6 ответов

0

Попробуйте поместить их в родительский div с фиксированными полями. т.е. поля не настроены на "авто".

Kirk Logan 20 март 2014, в 13:50

0

Сначала недействительный HTML,

Вы не можете иметь элемент уровня блока внутри тега p, поэтому, пожалуйста, удалите теги p которые окружают теги h3

Во-вторых, сделайте отображение h3 с текстом ИЛИ как inline-block

Демо: http://jsfiddle.net/ATdkE/14/

Возможно, вам придется добавить еще несколько стилей

Clyde Lobo 20 март 2014, в 13:48

0

Я понятия не имел, что ты не можешь сделать это! Спасибо!
seun 20 март 2014, в 15:42

0

Нехорошая практика писать теги внутри <p></p> вам следует избавиться от <p> и напрямую писать

<h3>OR</h3>

Дайте стиль

h3{
   display:inline-block;
}

См. Демонстрацию

Dhaval Marthak 20 март 2014, в 13:43

0

Спасибо @DhavalMarthak, это тоже работает!
seun 20 март 2014, в 15:46

0

IE поддерживает встроенный блок, но только для элементов, которые являются внутренне встроенными. использование

float:left

http://jsfiddle.net/ATdkE/18/

rafael.dev 20 март 2014, в 13:33

0

Избавиться от "ИЛИ" внутри тега заголовка. Заголовки заголовка по умолчанию являются блоками отображения, поэтому они перезаписывают ваш поплавок влево. Вы также можете изменить тег заголовка на float: left;

ryudice 20 март 2014, в 13:12

0

Спасибо @ryudice
seun 20 март 2014, в 15:46

Ещё вопросы

Возьмите <p><h3>OR</h3></p> ... ДЕМО ЗДЕСЬ
чтобы добавить к комментарию @Ruddy's Ruddy, вы также можете заключить эту строку (с помощью OR ) в div и добавить ее тоже.
@ruddy@webno ruddy @ruddy@webno webno Спасибо, это работает!
Я понятия не имел, что ты не можешь сделать это! Спасибо!
Спасибо @DhavalMarthak, это тоже работает!

G-Cyr · Accepted Answer · 2014-03-20T12-55-00.000Z

используйте <p> или <h3> и установите его inline-block, сбросьте #maincontent white-space для #maincontent и его внутреннего содержимого:

http://jsfiddle.net/ATdkE/15/

div#login, div#register, #maincontent > h3 {
    white-space:normal;/* reset to normal */
    display:inline-block;
}
div#login, div#register {
    background: linear-gradient(top, #fff, #f8f8f8);
    border: 1px solid #d0d2d5;
    border-bottom: 1px solid #bebfc2;
    border-radius: 4px;
    margin: 0px 0 10px 0;
    padding: 30px;
    width: 212px;
    vertical-align:top;
}
#maincontent {
    white-space:nowrap;/* keep all inline element on one single line */
    text-align:center;/* no need of obsolete attribute in HTML markup :) */
}

вы можете добавить некоторый запас и изменить выравнивание по вертикали http://jsfiddle.net/ATdkE/17/

Это работает! и спасибо за стиль тоже, очень ценю, что вы объясняете, что делает каждая строка. @GCyrillus