display: inline-block не работает, если не всплыл первый div: left

0

Я относительный новичок в мире CSS, поэтому, пожалуйста, извините мое невежество! Я пытаюсь использовать следующий CSS для выравнивания двух divs по горизонтали:

.portrait {
    position: relative;
    display:inline-block;
    width: 150px;
    height: 200px;
    padding: 20px 5px 20px 5px;
 }

.portraitDetails {
    position: relative;
    display:inline-block;
    width: 830px;
    height: 200px;
    padding: 20px 5px 20px 5px;
 }

К сожалению, если я не удалю display: inline-block из класса .portrait и замените его на float:left .portraitDetails блок div .portraitDetails div под первым блоком div. Что происходит?

  • 1
    Что такое CSS для родительского контейнера двух div? Имеет ли он width: 980px ?
  • 0
    Ширина контейнера составляет 1000 пикселей, но я уменьшил ширину до 980 пикселей для заполнения.
Показать ещё 5 комментариев
Теги:

2 ответа

0
Лучший ответ

Поскольку вы представили рабочий пример, проблема кажется более ясной.
Вам нужно просто удалить display: inline-block и width: 830px свойства width: 830px из правого div. Конечно, не забудьте добавить свойство float к нему.

Иногда люди забывают, какова цель свойства float. В вашем случае это образ, который должен иметь свойство float и только изображение. По умолчанию правый div будет оставаться на 100% ширине, пока изображение будет плавать слева.

СОВЕТ. Если текст из div достаточно длинный, чтобы плавать под изображением, и вы хотите сохранить его "отступом" в одной и той же точке, добавьте поле в div со значением, равным ширине изображения.

Поделиться
  • 0
    Ты, мой друг, легенда! Float теперь работает нормально, и я на самом деле это понимаю! Ну, это одна из двух проблем с макетом, отсортированных сегодня! Благодарю.
0

Проблема с display: inline-block; заключается в том, что братья и сестры, имеющие это свойство, всегда разделены одним пробелом, но только в том случае, если между их открывающими и закрывающимися тегами есть белые пробелы.
Если родительский контейнер имеет фиксированную ширину, равную сумме ширины этих двух div, то они не будут соответствовать, потому что это маленькое белое пространство подталкивает второй div к следующей строке. Вы должны удалить пробел между тегами.
Итак, вместо этого:

<div class="portrait">
    ...
</div>
<div class="portraitDetails">
    ...
</div>

вы должны это сделать:

<div class="portrait">
    ...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
    ...
</div>
Поделиться
  • 2
    Или вы можете использовать отрицательное поле .portrait, .portraitDetails { margin-right: -4px; }
  • 0
    @LinkinTED, что если font-size контейнера установлен в какое-то огромное значение? Тогда 4px отрицательной маржи было бы недостаточно.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню