반응형

css 13

플렉스 컨테이너의 높이 행이 같음

플렉스 컨테이너의 높이 행이 같음 는.list-items 번째row같은 것을 가지다height. 하지만 두번째에 있는 아이템들은row다가 heights. 나는 모든 아이템이 유니폼을 입었으면 합니다.height. 고정 높이를 제공하지 않고 플렉스박스만 사용하지 않고 이를 달성할 수 있는 방법이 있습니까? 나의 ㅇㅇcode .list { display: flex; flex-wrap: wrap; max-width: 500px; } .list-item { background-color: #ccc; display: flex; padding: 0.5em; width: 25%; margin-right: 1%; margin-bottom: 20px; } .list-content { width: 100%; } box 1..

programing 2023.09.13

Twitter 부트스트랩 드롭다운이 화면 밖으로 바뀝니다.

Twitter 부트스트랩 드롭다운이 화면 밖으로 바뀝니다. 트위터 부트스트랩 드롭다운 메뉴를 구현하고 싶은데, 제 코드는 다음과 같습니다. a b c d 드롭다운이 잘 작동하고 드롭다운이 화면 오른쪽 가장자리 옆에 있으며 드롭다운 토글을 클릭하면 목록이 화면 밖으로 나타납니다.화면에 표시되는 것과 같습니다. 어떻게 고치죠?덧셈.pull-right로.ul.dropdown-menu할 것입니다 감가 상각 통지:부트스트랩 v3.1.0 시점에서.pull-right드롭다운 메뉴에서는 더 이상 사용되지 않습니다.메뉴를 오른쪽 정렬하려면.dropdown-menu-right. 감가상각 통지 2: 부트스트랩 v5 시점에서,.dropdown-menu-right사용되지 않습니다.부트스트랩 v5의 경우 를 사용합니다. 부트스트..

programing 2023.09.08

문자 입력 요소 내부의 글꼴 멋진 아이콘

문자 입력 요소 내부의 글꼴 멋진 아이콘 사용자 이름 입력 필드 안에 사용자 아이콘을 삽입하려고 합니다. 나는 비슷한 질문에서 그 해결책 중 하나를 시도해 보았습니다.background-imageFont Awesome은 글꼴이므로 속성이 작동하지 않습니다. 다음은 저의 접근 방식이고 아이콘 디스플레이를 받을 수 없습니다. .wrapper input[type="text"] { position: relative; } .wrapper input[type="text"]:before { font-family: 'FontAwesome'; position: absolute; top: 0px; left: -5px; content: "\f007"; } 기본 폰트 어썸 CSS에 폰트 페이스가 선언되어 있어서 위에 폰트 패..

programing 2023.09.08

CSS 필터를 배경 이미지에 적용하는 방법

CSS 필터를 배경 이미지에 적용하는 방법 검색 페이지의 배경 이미지로 사용하고 있는 JPEG 파일이 있으며 Backbone.js 컨텍스트 내에서 작업하고 있기 때문에 CSS를 사용하여 설정하고 있습니다. background-image: url("whatever.jpg"); CSS 3 블러 필터를 배경에만 적용하고 싶은데, 그 한 가지 요소만 어떻게 스타일링해야 할지 모르겠습니다.내가 시도하는 경우: -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); 바로 background-image내 CSS에서는 배경뿐만 아니라 전체 페이지에 스타일을 지정합니다.이..

programing 2023.08.29

배경 이미지와 색상을 함께 사용할 수 없는 이유는 무엇입니까?

배경 이미지와 색상을 함께 사용할 수 없는 이유는 무엇입니까? 제가 하려는 것은 두 가지 모두를 보여주는 것입니다.background-color그리고.background-image그래서 나의 절반.div오른쪽 그림자 배경 이미지를 가리고 다른 왼쪽 부분은 배경 색상을 가리킵니다. 하지만 사용할 때background-image색이 사라집니다.요소의 배경으로 색상과 이미지를 모두 사용할 수 있습니다. 사용자가 설정합니다.background-color그리고.background-image문체이미지가 요소보다 작으면 다음을 사용해야 합니다.background-position스타일은 오른쪽에 배치하고 반복되지 않도록 하고 전체 배경을 덮습니다.background-repeat스타일: background-color: ..

programing 2023.08.24

Firefox용 사용자 지정 CSS 스크롤 막대

Firefox용 사용자 지정 CSS 스크롤 막대 CSS로 스크롤바를 사용자 지정하고 싶습니다. 저는 사파리와 크롬에서 잘 작동하는 웹킷 CSS 코드를 사용합니다. ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #c2d2e4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0a4c95; } 파이어폭스에서 동일한 작업을 수행하려면 어떻게 해야 합니까? jQuery를 사용하면 쉽게 할 수 있다는 것을 알지만, 가능하다면 순수한 CSS로 하고 싶습니다.2018년 말 현재 파이어폭스에서 사용할 수..

programing 2023.08.24

HTML 가로 스크롤 막대는 숨기지만 세로 스크롤 막대는 숨기기

HTML 가로 스크롤 막대는 숨기지만 세로 스크롤 막대는 숨기기 HTML 텍스트 영역의 너비는 고정되어 있지만 높이는 가변적입니다.설정하고 싶습니다.overflow:scroll세로 스크롤 막대는 표시할 수 있지만 가로 스크롤 막대는 표시할 수 없습니다.사용할 수 없습니다.overflow:auto내 상황에 맞는 다른 일들 때문에. 저는 CSS2를 사용하여 가로 스크롤바가 아닌 세로 스크롤바를 표시하는 방법이 없다는 것을 알고 있습니다.가로 스크롤 막대를 숨기기 위해 자바스크립트로 할 수 있는 일이 있습니까?다음과 같이 CSS를 사용할 수 있습니다. overflow-y: scroll; overflow-x: hidden; CSS를 사용합니다.자바스크립트보다 쉽고 빠릅니다. overflow-x: hidden; ..

programing 2023.08.19

CSS 표시 속성을 기본값으로 재설정

CSS 표시 속성을 기본값으로 재설정 디스플레이 속성을 기본값으로 재정의할 수 있습니까?예를 들어 한 스타일에서 이 값을 없음으로 설정한 경우 기본값으로 다른 스타일에서 이 값을 재정의하려고 합니다. 아니면 그 요소의 기본값이 무엇인지 알아내서 그 요소로 설정하는 방법밖에 없습니까?요소가 일반적으로 블록인지, 인라인인지, 아니면...브라우저의 기본 스타일은 사용자 에이전트 스타일시트에 정의되어 있으며, 원본은 여기에서 찾을 수 있습니다.안타깝게도 계단식 및 상속 수준 3 규격에서는 스타일 속성을 브라우저 기본값으로 재설정하는 방법을 제안하지 않는 것 같습니다.그러나 계단식 및 상속 레벨 4에서 이에 대한 키워드를 다시 도입할 계획이 있습니다. 작업 그룹은 아직 이 키워드의 이름을 결정하지 않았습니다(링크..

programing 2023.08.14

최소 높이 100% CSS 레이아웃

최소 높이 100% CSS 레이아웃 광범위한 브라우저에서 100% 최소 높이의 요소를 만드는 가장 좋은 방법은 무엇입니까? 특히 다음과 같은 레이아웃이 있는 경우header그리고.footerheight, 을 어떻게 할까요?100%그 사이의 공간의footer바닥에 고정되어 있습니까?나는 다음 것을 사용하고 있습니다: CSS 레이아웃 - 100% 높이. 최소 높이 이 페이지의 #container 요소의 최소 높이는 100%입니다.이렇게 하면 콘텐츠에 뷰포트가 제공하는 높이보다 더 많은 높이가 필요할 경우 #content #container의 높이도 길어집니다.그런 다음 #content의 가능한 열을 #container의 배경 이미지로 시각화할 수 있습니다. div는 테이블 셀이 아니므로 이러한 시각적 효과를..

programing 2023.08.14

유연한 항목이 콘텐츠 크기를 넘어서 축소되지 않는 이유는 무엇입니까?

유연한 항목이 콘텐츠 크기를 넘어서 축소되지 않는 이유는 무엇입니까? 4개의 플렉스박스 열이 있고 모든 것이 정상적으로 작동하지만, 열에 텍스트를 추가하고 큰 글꼴 크기로 설정하면 플렉스 속성으로 인해 열이 필요 이상으로 넓어집니다. 사용하려고 했습니다.word-break: break-word도움이 되었지만, 열의 크기를 매우 작은 폭으로 조정하면 텍스트의 문자가 여러 줄(한 줄에 한 글자씩)로 분할되지만 열의 너비는 한 글자 크기보다 작지 않습니다. 이 비디오를 보십시오(시작할 때는 첫 번째 열이 가장 작지만 창 크기를 조정했을 때는 가장 넓은 열입니다).플렉스 설정을 항상 존중하고 플렉스 크기 1:3:4:4) 알아요, 글꼴 크기와 열 채우기를 더 작게 설정하면...하지만 다른 해결책이 있을까요? 사용..

programing 2023.08.04
반응형