반응형
"width : -moz-fit-content;"에 대한 CSS 교차 브라우저 값이 있습니까?
중앙에 배치 하고 동시에 콘텐츠 너비 에 맞추려면 div가 필요합니다 .
나는 지금 다음과 같이하고 있습니다.
.mydiv-centerer{
text-align: center;
.mydiv {
background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 5px #0099FF;
color: white;
margin: 10px auto;
padding: 10px;
text-align: justify;
width: -moz-fit-content;
}
}
이제 마지막 명령 "width : -moz-fit-content;" 입니다 정확히 내가 필요!
유일한 문제는 .. Firefox에서만 작동합니다.
또한 "display : inline-block;"을 사용해 보았습니다 . ,하지만 div처럼 작동하려면이 div가 필요합니다. 즉, 모든 다음 div는 이전 div가 아닌 inline 아래에 있어야합니다 .
가능한 크로스 브라우저 솔루션을 알고 있습니까?
마침내 다음을 사용하여 수정했습니다.
display: table;
Mozilla의 MDN은 다음과 같은 [ source ]를 제안합니다 .
p {
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
Webkit, Gecko 및 Blink에 대해이를 수정하는 단일 선언이 있습니까? 아니요. 그러나 각 레이아웃 엔진의 규칙에 해당하는 여러 너비 속성 값을 지정하는 브라우저 간 솔루션이 있습니다.
.mydiv {
...
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
...
}
적응 : MDN
비슷한 경우에 다음을 사용했습니다. white-space: nowrap;
나는 이것을 사용합니다 :
.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
아래 하나는 크롬과 파이어 폭스에서 나를 위해 일했습니다.
div {
max-width: max-content;
}
왜 br
s를 사용하지 않습니까?
<div class="mydiv-centerer">
<div class="mydiv">Some content</div><br />
<div class="mydiv">More content than before</div><br />
<div class="mydiv">Here is a lot of content that
I was not anticipating</div>
</div>
CSS
.mydiv-centerer{
text-align: center;
}
.mydiv{
background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 5px #0099FF;
color: white;
margin: 10px auto;
padding: 10px;
text-align: justify;
display:inline-block;
}
반응형
'Program Tip' 카테고리의 다른 글
--resource-rules는 mac os x> = 10.10에서 더 이상 사용되지 않습니다. (0) | 2020.11.06 |
---|---|
테스트 조치에 대해 구성표가 구성되지 않았습니다 (iOS xcode 프로젝트). (0) | 2020.11.06 |
jQuery로 HTML 태그를 제거하는 방법은 무엇입니까? (0) | 2020.11.06 |
이름에 Pandas DataFrame의 특정 문자열이 포함 된 열을 삭제합니다. (0) | 2020.11.06 |
URL 쿼리에 대한 NameValueCollection? (0) | 2020.11.06 |