У мене є div, для якого я хочу вказати ФІКСОВАНУ ширину та висоту, а також відступ, який можна змінити, не зменшуючи вихідну ширину / висоту DIV або не збільшуючи його, чи є для цього трюк CSS або альтернатива за допомогою відступів?
Відповіді:
Рішенням є обгортання вашого заповненого div з фіксованою шириною зовнішнього div
HTML
<div class="outer">
<div class="inner">
<!-- your content -->
</div><!-- end .inner -->
</div><!-- end .outer -->
CSS
.outer, .inner {
display: block;
}
.outer {
/* specify fixed width */
width: 300px;
padding: 0;
}
.inner {
/* specify padding, can be changed while remaining fixed width of .outer */
padding: 5px;
}
Заявіть це у своєму CSS, і ви повинні бути добре:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Це рішення можна реалізувати без використання додаткових обгортки.
Це змусить браузер обчислити ширину відповідно до "зовнішньої" ширини div, це означає, що відступ буде відніматися від ширини.
Здається, ви хочете імітувати модель коробки IE6. Для цього ви можете використовувати властивість CSS 3 box-sizing: border-box . Це підтримується IE8, але для Firefox вам потрібно буде використовувати, -moz-box-sizingа для Safari / Chrome - використовувати -webkit-box-sizing.
IE6 вже обчислює висоту неправильно, тому ви добре працюєте в цьому браузері, але я не впевнений у IE7, я думаю, він буде обчислювати висоту однакову в режимах химерності.
спробуйте цей фокус
div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
це змусить браузер обчислити ширину відповідно до "зовнішньої" ширини div, це означає, що відступ буде відніматися від ширини.