Почему это <div> шире, чем его содержимое?

Question

0

У меня есть следующий html-код для формы (сгенерированной рельсами):

Глядя в инспекторе элементов Chrome, левый <div> ведет себя как ожидалось, но правый <div> инкапсулирует то, что находится в левой <div>.

Зачем это делать, если правильный <div> содержит только то, что находится в правой половине формы (не включая кнопку "Зарегистрироваться")?

Здесь соответствующий CSS:

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

0

попробуйте использовать display: inline-block для этого div
Ashish Chopra 13 март 2014, в 18:39
0

Я сожалею, что в CSS нет класса для редактирования с именем right / left_half. Пожалуйста, сделайте jsfiddle, чтобы вам было легче помочь.
Mattos 13 март 2014, в 18:44
0

@Ashish Отображение Chopra display: inline-block внутри left_half только сместил right_half ниже left_half а также сделал все элементы внутри него встроенными.
Hugo 13 март 2014, в 18:48

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

Теги:

2 ответа

0

Ты используешь

.edit_info {
     width: 610px;
     margin: auto;
}

Используйте width: auto вместо:

.edit_info {
    margin: 0 auto;
    width: auto;
}

Sajad Karuthedath 13 март 2014, в 17:11

попробуйте использовать display: inline-block для этого div
Я сожалею, что в CSS нет класса для редактирования с именем right / left_half. Пожалуйста, сделайте jsfiddle, чтобы вам было легче помочь.
@Ashish Отображение Chopra display: inline-block внутри left_half только сместил right_half ниже left_half а также сделал все элементы внутри него встроенными.

Astrayus · Accepted Answer · 2014-03-13T17-24-00.000Z

Это потому, что left_half настроен на float: left, поэтому right_one складывается поверх него.

Вы можете... обернуть их внутри <div> и установить половину в float: left например.

Но я уже завернул их в <div> с классом edit_info
Потому что все внутри этого div, которое не плавает, может заканчиваться над плавающими элементами.
Вы можете попробовать без, но я не уверен, что случится с кнопкой, что я только что заметил, что она плавает правильно