Поиск информации о совместимости браузера CSS для настройки ширины с помощью левой и правой - PullRequest
Новая
       29

Поиск информации о совместимости браузера CSS для настройки ширины с помощью левой и правой

1 голос
/ 24 сентября 2008

Вот вопрос, который преследует меня уже год. Основной вопрос в том, как установить размер элемента относительно его родителя, чтобы он вставлялся в N пикселей от каждого края? Установка ширины была бы хорошей, но вы не знаете ширину родительского элемента, и вы хотите, чтобы размеры элементов изменялись вместе с окном. (Вы не хотите использовать проценты, потому что вам нужно определенное количество пикселей.)

Редактировать Мне также необходимо предотвратить растяжение или сжатие содержимого (или недостатка содержимого) обоих элементов. Первый ответ, который я получил, заключался в том, чтобы использовать padding для родителя, который отлично работал бы. Я хочу, чтобы родительский элемент имел ширину ровно 25% и ту же высоту, что и область клиента браузера, чтобы ребенок не мог нажать на нее и получить полосу прокрутки. / Edit

Я пытался решить эту проблему, используя {top: Npx; слева: Npx; внизу: Npx; справа: Npx;}, но это работает только в определенных браузерах.

Я мог бы написать javascript с jquery, чтобы исправить все элементы при каждом изменении размера страницы, но я не очень доволен этим решением. (Что если я хочу, чтобы верхнее смещение составляло 10 пикселей, а нижнее - только 5 пикселей? Это становится сложным.)

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

Ответы [ 5 ]

1 голос
/ 26 сентября 2008

Модель CSS Box может помочь вам понять, но я предполагаю, что вы не достигнете идеального макета пикселей только с помощью CSS.

Если я правильно понимаю, вы хотите, чтобы родительский элемент имел ширину 25% и точно высоту области отображения браузера. Затем вы хотите, чтобы дочерний элемент имел ширину 25% - 2n пикселей и высоту 100% -2n пикселей, а дочерний элемент - n пикселей. Никакая текущая спецификация CSS не включает поддержку этих типов вычислений (хотя IE5, IE6 и IE7 имеют нестандартную поддержку для выражений CSS и IE8 прекращает поддержку для выражений CSS в стандартах IE8 режим).

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

<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>

... но появится горизонтальная полоса прокрутки. Кроме того, если содержимое сжато, родительский фон не будет превышать 100%. Возможно, это пример дополнения, который вы представили в самом вопросе.

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

1 голос
/ 24 сентября 2008

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

Если вас также интересует вертикальное расстояние, вам нужно использовать позиционирование. Родительский элемент должен быть расположен; если вы не хотите никуда его перемещать, используйте position: relative и не беспокойтесь о настройке top или left; оно останется там, где оно есть. Затем вы используете абсолютное позиционирование дочернего элемента и задаете top, right, bottom и left относительно ребер родительского элемента.

Например: 

#outer {
    width: 10em;
    height: 10em;
    background: red;
    position: relative;
}

#inner {
    background: white;
    position: absolute;
    top: 1em;
    left: 1em;
    right: 1em;
    bottom: 1em;
}

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

0 голосов
/ 24 сентября 2008

Или наоборот: установите margin дочернего элемента.

Floatutorial - отличный ресурс для подобных вещей.

0 голосов
/ 24 сентября 2008

Попробуйте это: 

.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}

Он должен иметь пространство Npx со всех сторон, растягиваясь для заполнения родительского элемента.

EDIT: Конечно, на родителя, вы также можете использовать 

{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}
0 голосов
/ 24 сентября 2008

Просто примените некоторые отступы к родительскому элементу, а не ширину дочернего элемента Предполагая, что они оба display:block, это должно работать нормально.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...