CSS горизонтальное выравнивание для div внутри контейнера div?

Question

Возникли проблемы с тем, что в WP 3.0.4 не отображается мой стиль CSS для горизонтального выравнивания 4 блоков (блоков) внутри контейнера контейнера. ПРИМЕЧАНИЕ. Тот же стиль CSS хорошо работает с HTML 4.01 Transitional // EN на моем html / php-сайте, написанном вручную. Но в WP 3.0.4 четыре ступени сходятся друг от друга, как лестница.

Я использую FireFox 3.6.13, кстати.

CSS:

 div .box-container { display: inline;
 margin: 0.63em 0pt; padding: 10px;
 width: 640px; background-color:
 rgb(229, 231, 225); position:
 relative; float: left; overflow:
 hidden; }

 div .small-box { border: 1px solid
 rgb(153, 51, 102); margin: 10px 5px;
 padding: 0.325em; float: left;
 background-color: rgb(255, 244, 227);
 width: 128px; line-height: 0.85em;
 max-height: 8em; min-height: 8em;
 position: relative; }

HTML выглядит так:

 <div class="box-container">
 <div class="small-box">SOME TEXT
 & IMAGE</div> <div
 class="small-box">SOME TEXT &
 IMAGE</div> <div
 class="small-box">SOME TEXT &
 IMAGE</div> <div
 class="small-box">SOME TEXT &
 IMAGE</div>

 </div>

Ширина блока box-container указана в 640px, но я заметил, что отступы расширяют его. В любом случае, он достаточно большой, чтобы вместить четыре маленьких бокса, которые в сумме составляют 512 пикселей плюс их общий запас в 40 пикселей, а также отступ в 20 пикселей на элементе box-container.

Я не понимаю, почему отступ увеличивает размер элемента box-container. Но когда я попытался использовать max-width: 640px, я заметил, что все боксы выровнены вертикально, а div box-container был не шире, чем 170px.

Div-блоки маленьких размеров на самом деле имеют одинаковый размер, их содержимое состоит из текста и изображения.

Помощь?

Answer 1

Обнаружена проблема: WordPress выпустил неверный HTML.Когда я пошел, чтобы проверить CSS и HTML, CSS проверил чистый, но HTML был полон сюрпризов.Я не осознавал, пока не пошел к источнику страниц в браузере и не увидел, что WordPress поместил много тегов абзаца и других тегов, некоторые теги списка, которые я, конечно, не вводил в редактор страниц.В любом случае, валидатор HTML указал на конечный тег абзаца внутри div-контейнера.Там не было никакого дела - там не было даже тега начального абзаца.

Поэтому я вернулся к редактору страниц, удалил все пробелы между моим HTML и обновил страницу.УРА!Он работает так, как и должен.

Извлеченный урок: не доверяйте редактору WordPress HTML без проверки.

Большое спасибо тем, кто ответил.Особенно полезной была ссылка на http://jsfiddle.net, очень полезный инструмент, который заверил меня, что мой CSS был верным.

Answer 2

Я думаю, вам нужно удалить пробел из этих строк:

div .box-container
div .small-box

вот так:

div.box-container

Затем удалите правило padding из div.box-container.

Чтобы вернуть отступы, добавьте элемент оболочки внутри div.box-container с нужным заполнением.Или вместо добавления дополнительного элемента вы можете изменить margin на div.small-box на margin: 20px 0 20px 15px, чтобы приблизить его.

Answer 3

Мне кажется, я понимаю, что вы подразумеваете под лестницей. Это обычно происходит со мной, когда я забываю расположить ширину / высоту с помощью плавающих левых объектов. Таким образом, каждый маленький блок пытается всплыть влево, но браузер считает, что в этом поле что-то есть, поэтому он перемещает следующий элемент в «следующую строку». Это общая логика, которую я всегда видел в «лестничных» клетках.

Вы можете сначала попробовать проверить с заданными шириной и высотой. И убедитесь, что коробки подходят как надо. Затем перейдите к max-width и max-height.

Без скриншота и / или, лучше, ссылки, это все, что я могу сказать:)

Answer 4

Некоторые вещи, которые я бы попробовал: * display: block в контейнере *! Важно во всех свойствах * font-size объявить (вы используете размер шрифта 16px?ящики

[] х