CSS-макет - почему границы и размер ведут себя так? - PullRequest
Новая
       14

CSS-макет - почему границы и размер ведут себя так?

0 голосов
/ 15 марта 2010

Я хочу создать диалог с заголовком, рамками (слева, справа, снизу), а также с содержимым. Текущий исходный код: 

<html>
<body>
<div style="background: #0ff; width: 152px; height: 112px; position: absolute; top: 24px; left: 128px; display: table">
<div style="display: table-row;">
<div style="background: #f00; width: 100%; display: table-cell;height: 24px;">top</div>
</div>
<div style="display: table-row;">
<div style="background: #0f0; width: 100%; display: table-cell;">

<div style="display: table;">
<div style="display: table-row;">

<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>

<div style="display: table-cell;">
<div style="overflow: scroll; white-space: nowrap">
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />

cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
</div>
</div>

<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>

</div>
</div>



</div>
</div>
<div style="display: table-row;">
<div style="background: #000; width: 100%; display: table-cell; height: 4px;"></div>
</div>

</div>
</body>
</html>

производит вывод

alt text

что случилось с левой и правой границами и почему размер превышает ширину, указанную в верхнем родительском элементе (152px)?

Ответы [ 5 ]

4 голосов
/ 15 марта 2010

Если вы собираетесь использовать таблицу, используйте таблицу. Настройка отображения элементов блока для имитации различных элементов таблицы в лучшем случае проблематична, и кросс-браузер очень непредсказуем.

1 голос
/ 15 марта 2010

Извините, но ваш HTML-код - ужасный беспорядок супа с тегами, напоминающий о начале 90-х.

Для вашей конкретной задачи ширина больше из-за вашего правила white-space: nowrap, которое растягивает таблицу. И это то, что, вероятно, удаляет границы - в этих «ячейках» нет содержимого, поэтому они сжимаются до нулевой ширины.

Как сказал Робусто, если вам нужен стол, используйте стол. Если вам нужно диалоговое окно, вам определенно не нужны все эти вложенные теги div. Просто установите свой внешний и используйте правило границы, чтобы установить границы: 

<div style="border:4px solid #000; border-top:0; background:#0ff; width:152px; height:112px;">
    <h2 style="background:#f00;">top</h2>
    cwe cwe cwe cwe...
</div>
1 голос
/ 15 марта 2010

Вы используете слишком много встроенных правил, попробуйте разделить их с помощью селекторов CSS, классов и идентификаторов для div, используйте таблицы соответствующим образом.

Некоторые правила отменяют другие, поэтому вы не видите границ.

0 голосов
/ 15 марта 2010

прокрутка не вызвана изменением размера, она вызвана тем, что вы заставили значение прокрутки в переполнении.По моему опыту, настройка прокрутки показывает полосы прокрутки все время, хотя и в отключенном состоянии.попробуйте установить переполнение на автоматический 

<div style="overflow: auto; white-space: nowrap">
0 голосов
/ 15 марта 2010

Вам не нужно использовать все эти div s для начала. Вы можете значительно упростить ваш HTML: 

<div>
  <h1>top</h1>
  <div>
    <p>cwe cwe cwe</p>
    <p>cwe cwe cwe</p>
  </div>
</div>

и все же легко применять все стили, которые вам нужны. Нет необходимости создавать div для каждой границы. Вот для чего нужны атрибуты CSS border-left, border-right, border-bottom и border-top (и они поддерживаются древними браузерами, в отличие от display: table).

...