starjava

아이들이 가로축을 채우도록 신장시키는 방법은? 좌우 플렉스박스가 있습니다. .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } .wrapper>.left { background: #fcc; } .wrapper>.right { background: #ccf; } Left Right 문제는 적절한 아이가 반응을 보이지 않는다는 것입니다.구체적으로 말하면 포장지의 높이를 채워줬으면 합니다. 어떻게 하면 이것을 해낼 수 있을까요? 행 플렉스박스 용기의 자식이 용기의 세로 공간을 자동으로 채웁니다. 명시하다flex: 1;나머지..

디브 안에서 수직으로 중심을 잡는 방법은? 이 질문에는 이미 다음과 같은 답변이 있습니다. 요소를 수평과 수직으로 중심을 맞추는 방법 (27개 답변) 닫힘8년 전에. 코드: as 지금 렌더링하면 스팬은 디브의 왼쪽 하단 모서리를 정렬합니다.수직 정렬 이해에 관한 제 기사를 보세요.토론의 마지막에 원하는 것을 달성하기 위한 여러 가지 기술이 있습니다. (초단축 요약: 어린이의 선 높이를 용기 높이와 동일하게 설정하거나 용기의 위치를 설정하고 어린이를 절대적으로 다음 위치에 배치합니다.top:50%와 함께margin-top:-YYYpx, YYY는 알려진 아이의 키의 절반입니다.)부모 DIV 추가 시 display:table; 자녀 요소에 추가합니다. display:table-cell; vertical-ali..

이미지를 자동으로 잘라내고 가운데로 맞추는 방법 임의의 이미지가 있는 경우 이미지 중앙에서 정사각형을 잘라내어 주어진 정사각형 안에 표시합니다. 이 질문은 이것과 유사합니다: CSS Display an Image Resize and Cropped, 하지만 이미지의 크기를 모르기 때문에 설정된 여백을 사용할 수 없습니다.한 가지 해결책은 잘라낸 치수에 맞게 크기가 지정된 요소 내에 중심을 둔 배경 이미지를 사용하는 것입니다. 기본예제 .center-cropped { width: 100px; height: 100px; background-position: center center; background-repeat: no-repeat; } 예:img꼬리표를 붙이다 이 버전은 다음을 유지합니다.img이미지를 저..

의사 요소 이후 CSS:before/:fter pseudo-elements에서 이미지의 높이를 변경할 수 있습니까? 이미지를 사용하여 특정 파일 형식에 대한 링크를 장식하고 싶다고 가정합니다.다음과 같이 링크를 선언할 수 있습니다. A File! 그러면 CSS는 다음과 같습니다. .pdflink:after { content: url('/images/pdf.png') } pdf.png내 링크 텍스트에 맞는 크기가 아닙니다. 에 를 조정해 수 :after이미지, 하지만 전 평생 올바른 구문을 찾을 수가 없어요.아니면 크기를 조정할 수 없는 배경 이미지와 같은 것입니까? ETA: 저는 a) 소스 이미지의 크기를 "적절한" 크기로 조정하거나 서버 측 또는 b) 마크업을 변경하여 단순히 IMG 태그를 인라인으로 ..

반응 사각형 격자 반응형 사각형으로 레이아웃을 만드는 방법이 궁금합니다.각 사각형은 수직과 수평으로 정렬된 내용을 갖습니다.구체적인 예는 아래에 표시되어 있습니다... 신솔루션(2022) CSS는 이 답변이 작성된 이후로 변경되었습니다.이제 사각형 그리드에 대한 코드를 대폭 간소화할 수 있는 몇 가지 속성이 있습니다. 그리드 레이아웃(MDN 참조)을 처리할 그리드 속성 각 그리드 항목의 사각 종횡비를 처리하기 위한 종횡비 특성(MDN 참조) 이미지 센터링을 처리하기 위한 객체 적합 속성 및 사각형을 덮어야 하는지 여부(MDN 참조) 다음은 예입니다. .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2%; } .square { aspe..

요소에 두 클래스가 모두 있는 경우에만 적용할 CSS 규칙 이 질문에는 이미 다음과 같은 답변이 있습니다. 클래스가 두 개인 요소에 적용되는 CSS Selector (3개 답변) 닫힘4년 전에. 마크업이 있다고 가정해 보겠습니다. ... ... ... 선택할 수 있는 방법이 있습니까?둘 다 가지고 있는abc그리고.xyz클래스(마지막 클래스) 및 인라인 너비를 재정의하여 유효 너비를 200px로 만들 수 있습니까? 이와 같은 것: [selector] { width: 200px !important; } div.abc.xyz { /* rules go here */ } ... 또는 간단히: .abc.xyz { /* rules go here */ } 아래는 다음 두 클래스가 있는 모든 태그에 적용됩니다. .abc..

CSS 플렉스박스를 이용한 고정폭 컬럼 설정하는 방법 저는 빨간색 상자가 나란히 표시될 때 너비가 25mm에 불과하기를 원합니다. 저는 이 미디어 쿼리 내에서 CSS를 설정하여 이를 달성하려고 합니다. @media all and (min-width: 811px) {...} 대상: .flexbox .red { width: 25em; } 하지만 그럴 때면 이런 일이 벌어집니다. 코드펜: http://codepen.io/anon/pen/RPNpaP . 내가 뭘 잘못했는지 알아요?다음을 사용해야 합니다.flex또는flex-basis보다 재산.widthMDN에 대해 자세히 알아보십시오. .flexbox .red { flex: 0 0 25em; } 그flexCSS 속성은 사용 가능한 공간을 채우기 위해 치수를 변경..

상위 패딩 무시 저는 부모 패딩을 무시하도록 제 수평적인 규칙을 얻으려고 노력하고 있습니다. 다음은 간단한 예입니다. #parent { padding:10px; width:100px; } hr { width:100px; } 수평 규칙이 상위 규칙에서 10px만큼 확장된다는 것을 발견할 수 있습니다.저는 부모님의 div에 있는 다른 모든 것들이 필요로 하는 패딩을 무시하도록 하려고 노력하고 있습니다. 저는 제가 다른 모든 것에 대해 별도의 디바를 만들 수 있다는 것을 알고 있습니다. 이것은 제가 찾고 있는 해결책이 아닙니다.쉬운 해결책, 그냥 하라. margin:-10px 인사부에이미지 목적으로 다음과 같은 작업을 수행할 수 있습니다. img { width: calc(100% + 20px); /* twic..

링크뿐만 아니라 버튼에서 파이어폭스의 점선 아웃라인을 제거하는 방법은 무엇입니까? 파이어폭스가 다음 링크에 보기 흉한 점선 포커스 개요를 표시하지 않도록 할 수 있습니다. a:focus { outline: none; } 하지만 어떻게 해야 할까요?태그도?이 작업을 수행할 때: button:focus { outline: none; } 버튼을 클릭해도 초점 윤곽선이 점선으로 표시됩니다. (그리고 네, 이것이 유용성 문제라는 것을 알지만, 못생긴 회색 점 대신 디자인에 적합한 나만의 포커스 힌트를 제공하고 싶습니다.)button::-moz-focus-inner { border: 0; } 선택기를 정의할 필요가 없습니다. :focus {outline:none;} ::-moz-focus-inner {border:..

CSS3를 사용한 SVG 드롭 섀도우 css3를 사용하여 svg 요소에 대한 드롭 섀도우를 설정하는 것이 가능합니까? box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; 저는 필터 효과를 이용한 그림자 만들기에 대한 몇 가지 의견을 보았습니다.css를 단독으로 사용하는 예가 있습니까?아래는 고객 스타일이 올바르게 적용되었지만 그림자 효과가 없는 작업 코드입니다.최소한의 코드로 그림자 효과를 얻을 수 있도록 도와주세요. svg .shadow { cursor:crosshair; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow..