반응형

CSS 16

CSS를 사용하여 디브 3개를 나란히 띄우는 방법?

CSS를 사용하여 디브 3개를 나란히 띄우는 방법? 나는 디브 2개를 나란히 띄우는 방법을 알고 있습니다. 하나는 왼쪽으로, 다른 하나는 오른쪽으로 띄우기만 하면 됩니다. 그런데 디브 3개로 어떻게 해야 하나요, 아니면 그냥 테이블을 사용해야 하나요?과 만 됩니다.float: left;를 들어 입니다. Left Stuff Middle Stuff Right Stuff 현대적인 방법은 CSS 플렉스박스를 사용하는 것입니다. 지원 표를 참조하십시오. .container { display: flex; } .container > div { flex: 1; /*grow*/ } Left div Middle div Right div CSS 그리드를 사용할 수도 있습니다. 지원 표를 참조하십시오. .container {..

programing 2023.10.12

테두리 스타일은 끈적거리는 위치 요소와 함께 작동하지 않습니다.

테두리 스타일은 끈적거리는 위치 요소와 함께 작동하지 않습니다. 이 맞지 .position: sticky;기여하다.끈적끈적한 테이블 헤더에 테두리 스타일을 설정하고 싶습니다.하지만 저는 투명한 배경색을 사용하고 싶지 않습니다.어떻게 하면 달성할 수 있을까요?여기 내 문제에 대한 샘플 코드와 JSFiddle Link가 있습니다. #wrapper { width: 400px; height: 200px; overflow: auto; } table { width: 100%; text-align: center; border-collapse: collapse; } table tr th, table tr td { border: 2px solid; } table thead th { position: -webkit-sti..

programing 2023.09.27

브라우저가 400px 이하로 확장되지 않습니까?

브라우저가 400px 이하로 확장되지 않습니까? 저는 액체 스타일 시트를 조립하는 작업을 하고 있는데 아주 잘 작동합니다.Chrome에서 내 브라우저 창의 크기가 400px 이하로 조정되지 않는다는 것을 알아차린 한 가지는 내가 그것을 축소할 때 그것은 단지 400px 정도에서 멈추고 수평 스크롤 바를 터뜨린다는 것입니다. 핸드폰으로 사이트를 열면 320px 정도로 완벽해 보여서 400px보다 낮게 확장이 되는 것으로 알고 있습니다. 이것이 브라우저/데스크톱의 것인지 아니면 내 CSS가 아닌 다른 것을 봐야 하는지 아는 사람이 있는지 궁금합니다.저는 최소 너비 선언이 없어서 무엇이 원인인지 잘 모르겠습니다. 다시 데스크톱에서는 400px 정도의 최소 너비로 축소되었다가 멈추지만, 휴대전화에서 펼치면 약 ..

programing 2023.09.17

부트스트랩 3 풋터를 아래쪽으로 플러시합니다.고정되지 않은

부트스트랩 3 풋터를 아래쪽으로 플러시합니다.고정되지 않은 저는 제가 설계하고 있는 사이트에 부트스트랩 3을 사용하고 있습니다. 저는 이 샘플과 같은 족자를 갖고 싶습니다.견본 부트스트랩 navbar-fixed-bottom으로는 문제가 해결되지 않도록 고정하고 싶지 않습니다.저는 단지 그것이 항상 내용의 가장 아래에 있고 또한 반응하기를 원합니다. 어떤 안내라도 해주시면 대단히 감사하겠습니다. 편집: 제가 잘 모르셨다면 죄송합니다.콘텐츠 본문에 콘텐츠가 충분하지 않을 때 발생하는 일입니다.발이 위로 올라가다가 밑에 빈 공간이 남습니다. 이것이 내 navbar를 위해 지금 가지고 있는 것입니다. SITEMAP News contact FAQ Privacy Policy xxxx yyyyyyyyyyyyy xxx..

programing 2023.09.12

테이블 셀을 잘라내되 내용을 최대한 맞추려면 어떻게 해야 합니까?

테이블 셀을 잘라내되 내용을 최대한 맞추려면 어떻게 해야 합니까? 프레드를 만나보세요.그는 테이블입니다. This cells has more content Less content here 프레드의 아파트는 크기를 바꾸는 특이한 습관이 있어서, 다른 유닛들을 모두 밀치고 부인을 밀치지 않기 위해 자신의 내용물을 숨기는 법을 배웠습니다.Whitford의 거실은 잊혀졌습니다. This cells has more content Less content here 이것은 효과가 있지만 프레드는 (셀디토라는 별명으로 불리는) 자신의 오른쪽 세포가 조금만 공간을 내준다면 왼쪽 세포가 잘리지 않을 거라는 계속되는 느낌을 가지고 있습니다.그의 제정신을 살릴 수 있습니까? 요약하면:어떻게 하면 테이블의 세포들이 고르게 흘러넘..

programing 2023.09.12

CSS에서 경계 불투명도를 설정할 수 있습니까?

CSS에서 경계 불투명도를 설정할 수 있습니까? 이와 같은 것으로 요소의 경계를 반투명하게 만드는 간단한 CSS 방법이 있습니까? border-opacity: 0.7; 그렇지 않다면 이미지를 사용하지 않고 어떻게 할 수 있는지 아는 사람이 있습니까?도 는.opacity는 전체 )를반투명으로 .소트 함를다 )게는a다게y트e를체(s는소)함(테두리를 반투명하게 만드는 가장 좋은 방법은 rgba 색상 형식입니다.예를 들어, 이렇게 하면 50% 불투명도의 빨간색 테두리가 됩니다. div { border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /*..

programing 2023.09.07

CSS 테이블 셀 등폭

CSS 테이블 셀 등폭 테이블 용기 안에 테이블 셀 요소의 개수가 정해지지 않았습니다. 테이블 셀 내에 다른 크기의 콘텐츠가 있더라도 테이블 셀의 너비를 동일하게 할 수 있는 순수한 CSS 방법이 있습니까? 최대 너비를 갖는다는 것은 당신이 얼마나 많은 세포를 가지고 있는지 아는 것을 수반할 것이라고 생각합니다.다음은 셀의 수가 불분명한 작동 피들입니다: http://jsfiddle.net/r9yrM/1/ 각 부모에게 폭을 고정할 수 있습니다.div(테이블), 그렇지 않으면 평소처럼 100%입니다. 요령은 각 셀에 어느 정도 폭을 주어 작동시키는 것입니다. 여기서 2%입니다.이는 브라우저가 표시된 차원을 준수하기 위해 매우 노력하는 테이블 알고리즘인 다른 테이블 알고리즘을 트리거할 것입니다. Chrome..

programing 2023.09.07

인라인 CSS로 의사 요소를 사용하기 전과 후 CSS ::를 사용하는 것?

인라인 CSS로 의사 요소를 사용하기 전과 후 CSS ::를 사용하는 것? 저는 인라인 CSS로 HTML 이메일 서명을 만들고 있습니다(즉, CSS instyle속성), 그리고 사용이 가능한지 궁금합니다.:before그리고.:after사이비 사기의 그렇다면 인라인 CSS로 이와 같은 것을 어떻게 구현합니까? td { text-align: justify; } td::after { content: ""; display: inline-block; width: 100%; } 유사 요소에 대해 인라인 스타일을 지정할 수 없습니다. 왜냐하면 의사 요소는 의사 클래스(이 다른 질문에 대한 제 답변 참조)와 마찬가지로 HTML로 표현할 수 없는 문서 트리의 추상화로서 셀렉터를 사용하여 CSS에서 정의되기 때문입니다. ..

programing 2023.09.07

CSS 유사 클래스 입력: not(사용 안 함) not:[type="cisco"]: 추가

CSS 유사 클래스 입력: not(사용 안 함) not:[type="cisco"]: 추가 저는 입력 요소에 일부 CSS를 적용하고 싶고 비활성화되지 않고 제출 유형이 아닌 입력에만 적용하고 싶습니다. 아래의 CSS는 작동하지 않습니다. 아마도 누군가 이것이 어떻게 추가되어야 하는지 설명해 줄 수 있다면요. input:not(disabled)not:[type="submit"]:focus{ box-shadow:0 0 2px 0 #0066FF; -webkit-box-shadow:0 0 4px 0 #66A3FF; } 다음 대신: input:not(disabled)not:[type="submit"]:focus {} 사용: input:not([disabled]):not([type="submit"]):focus {}..

programing 2023.09.02

내부자를 보내려면 어떻게 해야 합니까?내부자를 보내려면 어떻게 해야 합니까?부모의 밑바닥까지부모의 밑바닥까지?

내부자를 보내려면 어떻게 해야 합니까?부모의 밑바닥까지? 아래의 다른 div 그림과 코드 안에 있는 div.왜냐하면 부모 디브의 텍스트와 이미지가 있을 것이기 때문입니다.그리고 빨간 div는 부모 div의 마지막 요소가 될 것입니다. 이것은 한 가지 방법입니다. 그러나 내부 div는 절대적으로 위치하기 때문에 외부 div의 다른 내용이 중복되는 것에 대해 항상 걱정해야 합니다(그리고 항상 고정된 높이를 설정해야 함). 가능하다면, 그 내부 div를 외부 div의 마지막 DOM 개체로 만들고 "clear: both"로 설정하는 것이 좋습니다.플렉스박스 방식. .parent { display: flex; flex-direction: column; justify-content: space-between; } ..

programing 2023.09.02
반응형