Мне нужно свойство max-margin CSS, но оно не существует. Как я мог подделать это?

Я пытаюсь сделать простую страницу со следующими характеристиками:

  • Его тело должно быть не менее 60 м.
  • Его левое и правое поля должны быть одинаково широкими и не более 3-х кратных.
  • При изменении размера окна браузера поля документа должны быть изменены таким образом, чтобы горизонтальная полоса прокрутки окна браузера охватывала наименее широкий диапазон.

Преобразуя эти требования в задачу линейного программирования, получим:

DEFINITIONS:
BRWS = (width of the browser window, not a variable)
BODY = (width of the document body)
LRMG = (width of the document left and right margins)
HSCR = (range of the browser window horizontal scroll bar)

OBJECTIVE:
MIN HSCR   /* Third requirement */

CONSTRAINTS:
HSCR = BODY + 2*LRMG - BRWS  /* From the definition of how a browser's
                              * horizontal scrollbar works. */
BODY >= 60  /* First requirement */
LRMG <= 3   /* Second requirement */
LRMG >= 0   /* Physical constraint, margins cannot be negative */
HSCR >= 0   /* Physical constraint, scroll bars cannot have negative ranges */

Решая эту линейную программу, получим:

BODY = (BRWS <= 66) ? 60 : (BRWS - 6)
HSCR = (BRWS >= 60) ?  0 : (60 - BRWS)
LRMG = (BRWS + HSCR - BODY) / 2

(Извините за скучную математику, но я не уверен, что оригинальное объяснение на английском языке было достаточно ясным.)

Теперь вернемся к фактической странице. После поиска в Google, чтобы найти то, что я мог сделать с CSS, мне удалось реализовать первые два требования, используя следующий код:

body {
  min-width: 60em; /* First requirement */
}

/* The document body has only two children, both of which are divs. */
body > div {
  margin: 0 3em;    /* Second requirement, but in a way that makes */
  max-width: 100%;  /* it impossible to satisfy the third one. */
}

Если CSS имел свойство max-margin, удовлетворяющее всем требованиям, было бы легко:

body > div {
  max-margin: 0 3em;
  max-width: 100%;
}

Но, конечно, max-margin не существует. Как я мог его подделать?

Ответы

Ответ 1

Разделители Spacer по обе стороны от содержимого div. Это твоя прибыль. Установите максимальную ширину, используя свойство max-width.

Ответ 2

Чтобы имитировать левое поле переменной ширины:

.div-class {
    display: inline-block;
}
.div-class:before {
    content: '';
    width: 10%;
    min-width: 100px;
    max-width: 200px;
    display: inline-block;
}

Ответ 3

Для чистого CSS, который работает в любом сценарии:

  • используйте @media для создания точки останова.
  • Установите правило максимальной ширины ниже определенного размера, используя измерения гибкой ширины, такие как em или% и над этим размером используют статические ширины, такие как px.

Вам просто нужно сделать математику, чтобы выяснить статические размеры в точке останова, чтобы убедиться, что она весит текуче.

Пример кода:

.my_class {
   margin: 0px 10%;
} 
@media screen and (min-width: 480px) {
   .my_class { 
      margin: 0px 10px;
   } 
}

Это сделает .my_class следующим образом:

  • margin: 0px 10%; на ширине экрана 480px
  • margin: 0px 10px; под разрешением 480 пикселей.

Ответ 4

Ответ Матфея здесь правильный, но чтобы расширить его слова:

<div id="left"></div>
<div id="content">Content goes here</div>
<div id="right"></div>
<!-- probably need a cleanup div to fix floats here -->

CSS

#left, #right {
    float: left;
    max-width: 3em;
}

#content {
    min-width: 60em;
}

Ответ 5

body {
    margin-left: auto;
    margin-right: auto;
    width: 60em;
}

Ответ 6

Разделители - это плохая практика. Настройте еще один DIV поверх вашего DIV на вашем шаблоне с помощью text-align:right (если вы хотите максимизировать margin-left) или text-align:left, если вы хотите максимизировать margin-right, это выполнит задание.

Ответ 7

Ни один из ответов не работал у меня на 100%.

Лучший способ - использовать CSS table и table-cell. Поддерживается всеми браузерами (даже IE 8). Это будет выглядеть лучше, чем float или inline-block, если страница слишком узкая.

CSS 

.wrapper {
    display: table;
    position: relative;
    width: 100%;
}

.wrapper:before {
    content: '';
    display: table-cell;
    min-width: 100px;
    width: 25%;
    max-width: 300px;
}

.wrapper > .content {
    display: table-cell;
    width: 100%;
}

HTML 

<div class="wrapper>
    <div class="content>
        <!-- content here -->
    </div>
</div>

Ответ 8

См. http://www.labite.com/

Изменить размер окна для наблюдения за изменениями в ui.

На сайте используется максимальная ширина min-width с шириной: 100%

Черная рамка имеет максимальную ширину, которая немного шире, чем контейнер.