max-margin CSS 속성이 필요하지만 존재하지 않습니다.

max-margin CSS 속성이 필요하지만 존재하지 않습니다. 어떻게 속일 수 있습니까?

---

다음과 같은 특징을 가진 간단한 페이지를 만들려고합니다.

1. 몸체는 폭이 60em 이상이어야합니다.
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

(지루한 수학에 대해 미안하지만 영어로 된 원래 설명이 충분히 명확하다고 확신하지 않습니다.)

---

이제 실제 페이지로 돌아갑니다. 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존재하지 않습니다. 어떻게 속일 수 있습니까?

---

콘텐츠 div의 양쪽에있는 스페이서 div. 이것이 당신의 여백입니다. max-width 속성을 사용하여 최대 너비를 설정합니다.

---

가변 너비 왼쪽 여백을 모방하려면 :

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

---

모든 시나리오에서 작동하는 순수 CSS의 경우 :

1. 사용 @media 브레이크 포인트를 만들 수 있습니다.
2. em 또는 % 와 같은 반응 형 너비 측정을 사용하여 특정 크기 아래 의 최대 너비 규칙을 설정하고 해당 크기 이상에서는 px 와 같은 정적 너비를 사용 합니다.

중단 점에서 정적 크기를 계산하여 유동적으로 확장되는지 확인하기 위해 수학을 수행하면됩니다.

샘플 코드 :

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

이렇게하면 .my_class다음 두 가지가 모두 수행됩니다.

• The margin: 0px 10%; at over a screen width of 480px
• The margin: 0px 10px; at under 480px.

---

Matthew's answer is the correct one here, but to expand on what he's saying:

<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;
}

---

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

---

None of the answers worked for me 100%.

Best way is to use CSS table and table-cell. Supported by all browsers (even IE 8). This handles wrapping way better than float or inline-block solutions, when the page is too narrow.

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>

---

Spacer divs are bad practice. Setup another DIV on top of your DIV on your template with text-align:right (if you want to maximize the margin-left) or text-align:left if you want to maximize the margin-right, this will do the job.

---

See http://www.labite.com/

Re-size the window to observe the changes to the ui.

The website uses min-width max-width with width:100%

The black frame has max-width which is little wider then the container.

ReferenceURL : https://stackoverflow.com/questions/6285279/i-need-a-max-margin-css-property-but-it-doesnt-exist-how-could-i-fake-it