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

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

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

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

DEFINITIONS:
BRWS = (width of the browser window, not a variable)
BODY = (width of the document's body)
LRMG = (width of the document's left and right margins)
HSCR = (range of the browser window's 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's 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 не существует. Как я мог притворяться?

8 51
css

8 ответов:

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

48

для имитации левого поля переменной ширины:

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

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

  1. использовать @media для создания точки останова.
  2. поставил Макс-ширина правило ниже определенного размера с использованием адаптивных измерений ширины, таких как ЭМ или % и над этим размером используйте статические ширины как px.

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

Пример Кода:

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

это сделает .my_class как:

  • The margin: 0px 10%; при ширине экрана 480px
  • The margin: 0px 10px; на 480px.
8

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

<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;
}
7
body {
    margin-left: auto;
    margin-right: auto;
    width: 60em;
}
3

ни один из ответов не работал для меня на 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>
2

Spacer divs-плохая практика. Установите другой DIV поверх вашего DIV на вашем шаблоне с text-align:right (Если вы хотите максимизировать маржу-слева) или text-align:left Если вы хотите увеличить маржу-право, это будет делать эту работу.

1

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

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

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

черная рамка имеет ширину, которая немного шире, чем контейнер.

0