codeshow

크롬/사파리가 플렉시블 부모의 높이를 100% 채우지 않음 저는 특정 높이의 세로 메뉴를 원합니다. 각 하위 항목은 상위 항목의 높이를 채우고 가운데 정렬된 텍스트를 가져야 합니다. 아이들의 수는 무작위이기 때문에 저는 역동적인 가치관을 가지고 일해야 합니다. 브.container자식을 합니다..item 항상 부모의 키를 채워야 합니다.그러기 위해 플렉스박스를 사용했습니다. 를 만들기 는 사용중중간정렬텍스링로트크만데사다니용합드는를인된에▁with다▁for니▁using▁aligned사▁am합용▁links데▁making를 사용합니다.display: table-cell기술. 그러나 사용해야 .그러나 테이블 디스플레이를 사용하려면 높이를 100% 사용해야 합니다. 는 나의문는입니다..item-inner { hei..

DIV 중심을 수평 및 수직으로 맞춥니다. 이 질문에는 이미 다음과 같은 답이 있습니다. 요소의 중심을 수평 및 수직으로 맞추는 방법 (27개 답변) 마감됨8년 전에. DIV를 수직 및 수평으로 중앙에 배치하는 방법이 있습니까? 중요한 것은 창이 내용보다 작을 때 내용이 잘리지 않는다는 것입니다. DIV는 배경색과 너비 및 높이를 가져야 합니다. 저는 항상 제공된 예와 같이 절대 위치와 음의 여백을 가진 div를 중심으로 했습니다.하지만 위에 있는 내용을 잘라낸다는 문제점이 있습니다.이 문제 없이 div.content를 집중시킬 수 있는 방법이 있습니까? 다음은 http://jsbin.com/iquviq/1/edit 의 예입니다. CSS: body { margin: 0px; } .background { ..

HTML5 입력 유형 범위 범위 값 표시 범위 슬라이더를 사용하고 싶은 웹 사이트를 만들고 있습니다(웹킷 브라우저만 지원하는 것으로 알고 있습니다). 나는 그것을 완전히 통합했고 잘 작동합니다.하지만 저는 사용하고 싶습니다.textbox현재 슬라이드 값을 표시합니다. 내 말은 슬라이더가 처음에 값이 5이면 텍스트 상자에 5로 표시되고, 내가 슬라이드할 때 텍스트 상자의 값이 변경되어야 한다는 것입니다. 이 작업은 다음을 사용하여 수행할 수 있습니까?CSS또는html피하고 싶습니다JQuery.가능합니까?별도의 자바스크립트 코드 없이 해결책을 계속 찾고 있는 분들을 위한 것입니다.자바스크립트나 jquery 함수를 작성하지 않고는 쉬운 해결책이 거의 없습니다. 24 JsFiddle 데모 텍스트 상자에 값을 표..

테두리 반지름(%)(%) 및 픽셀(px) 또는 em) 테두리 반지름에 픽셀 또는 em 값을 사용하는 경우 값이 요소의 가장 큰 변보다 큰 경우에도 에지 반지름은 항상 원형 호 또는 알약 모양입니다. 백분율을 사용하는 경우 에지 반지름은 타원이고 요소의 각 변 중앙에서 시작하여 타원 또는 타원 모양이 됩니다. 테두리 반지름의 픽셀 값: div { background: teal; border-radius: 999px; width: 230px; height: 100px; padding: 40px 10px; box-sizing: border-box; font-family: courier; color: #fff; } border-radius:999px; 경계 반지름의 백분율 값: div { background: ..

스팬 요소의 줄 바꿈 방지 이 질문에는 이미 다음과 같은 답이 있습니다. 어떻게 하면 텍스트가 한 줄 이상 차지하는 것을 막을 수 있습니까? (5개 답변) 마감됨2년 전에. 나는 있습니다줄 바꿈 없이 표시할 요소입니다.내가 어떻게 그럴 수 있을까?이것을 CSS에 넣으십시오. white-space:nowrap; 자세한 내용은 여기에서 확인하십시오. http://www.w3.org/wiki/CSS/Properties/white-space white-space 그white-space속성은 요소 내부의 공백이 처리되는 방식을 선언합니다. 가치 normal이 값은 사용자 에이전트에게 공백 시퀀스를 축소하고 필요에 따라 줄 바꿈 상자를 채우도록 지시합니다. pre이 값을 사용하면 사용자 에이전트가 공백 시퀀스를 축..

주소 표시줄 표시 시 100vh 높이 - Chrome Mobile 저는 이 문제를 몇 번 접했고 이 문제에 대한 해결책이 있는지 궁금했습니다.제 문제는 크롬 모바일 앱에서 발생합니다.거기서 조금 아래로 스크롤하면 주소 표시줄이 사라집니다. 지까지다, 좋니습금. 예를 들어 보겠습니다. 의 컨너의이테.height으로 설정됨100vh. 보시는 것처럼 밑부분이 잘립니다. 아래로 스크롤하면 다음과 같습니다. 이제는 좋아 보입니다.따라서 Chrome은 주소 표시줄의 높이를 뷰포트 높이로 계산합니다.그래서 제 질문은: 주소 표시줄이 있든 없든 똑같이 보이는 방법이 있습니까?그래서 용기가 팽창하거나 뭐 그런 거?크롬 웹의 이 공식 기사에 따르면, 보이는 뷰포트를 채울 수 있는 높이를 설정하는 적절한 방법은 다음과 같습..

Base64로 CSS에 배경 이미지 데이터를 포함하는 것이 좋은 관행입니까, 나쁜 관행입니까? 나는 그리스 몽키 사용자 스크립트의 소스를 보고 있었고 그들의 css에서 다음을 발견했습니다. .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} 저는 그리스 몽키 스크립트가 서버에서 호스팅하는 것이 아니라 소스 내에서 가능한 모든 것을 번들로 제공하..

CSS로 직사각형 이미지를 사각형으로 만드는 방법은 무엇입니까? 저는 CSS로 실제로 이미지를 수정하는 것이 불가능하다는 것을 알고 있기 때문에 인용문에 크롭을 넣었습니다. 제가 하고 싶은 것은 직사각형 이미지를 찍고 CSS를 사용하여 이미지를 왜곡하지 않고 정사각형으로 보이게 하는 것입니다. 저는 기본적으로 이것을 바꾸고 싶습니다. 대상: 래퍼가 없는 순수 CSS 솔루션div또는 다른 쓸모없는 코드: img { object-fit: cover; width: 230px; height: 230px; } IMG 태그에 있을 필요가 없다고 가정하면... HTML: CSS: .thumb1 { background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers ima..

스타일 변경을 전파하기 위해 WebKit에서 다시 그리거나 다시 칠하도록 강제하려면 어떻게 해야 합니까? 스타일을 변경할 수 있는 몇 가지 사소한 자바스크립트가 있습니다. sel = document.getElementById('my_id'); sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected'); return false; 이것은 최신 버전의 FF, Opera 및 IE에서는 잘 작동하지만 최신 버전의 Chrome 및 Safari에서는 실패합니다. 그것은 형제자매인 두 후손에게 영향을 미칩니다.첫 번째 형제는 업데이트하지만 두 번째 형제는 업데이트하지 않습니다.또한 두 번째 요소의 자식은 포커스를 가지며 온클릭 속성에 위..