CSS 그리드, 열의 가로 간격 : 최소 내용이 예상대로 작동하지 않는 것 같습니다.

debugcn 에 게시 Dev

Bernd Wechner

나는 읽고 읽고 있었고 나는 여전히 왜 그리고 왜 min-content가이 예에서 나를 실패하는 것처럼 보이는지 이해하고 있습니다.

다음 HTML이 있습니다 (한 프로젝트에서 가져와 좋은 예의 요점으로 단순화 됨).

<div class="lo_buttons">
        <div class="lo_reload_icon">
            <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-application-icons/24/Apply.png" style="vertical-align: middle;">
        </div>

        <div class="lo_reload">
            <button type="button" class="button_left" id="btnReload">
                <img src="https://cdn2.iconfinder.com/data/icons/c9d/go.png" class="img_button">
            </button>
        </div>

        <div class="lo_shortcuts">
          <button type="button" class="button_left" id="btn1">1</button>
      <button type="button" class="button_left" id="btn2">2</button>
      <button type="button" class="button_left" id="btn3">3</button>
      <button type="button" class="button_left" id="btn4">4</button>
    </div>

        <div class="lo_space">
        </div>

        <div class="lo_utils">
          <button type="button" class="button_right" id="btn1">1</button>
      <button type="button" class="button_right" id="btn2">2</button>
      <button type="button" class="button_right" id="btn3">3</button>
        </div>  
</div>

및 다음 CSS :

.lo_buttons {
    grid-area: lo_buttons; 
    display: grid;
    grid-template-columns: min-content;
    grid-auto-rows: min-content min-content min-content 1fr min-content;
    grid-column-gap: 5px;
    grid-template-areas: "lo_reload lo_reload_icon lo_shortcuts lo_space lo_utils";
    white-space: nowrap !important;
}

.lo_reload      { grid-area: lo_reload; }
.lo_reload_icon { grid-area: lo_reload_icon;  }
.lo_shortcuts   { grid-area: lo_shortcuts; }
.lo_utils       { grid-area: lo_utils;  }
.lo_space       { grid-area: lo_space; }

.button_left { 
    float: left; 
    margin-right: 0.5em;
    margin-bottom: 5px;
}

.button_right { 
    float: right; 
    margin-left: 0.5em;
    margin-bottom: 5px;
}

모두 다음 위치에 있습니다.

https://codepen.io/bernd-wechner/pen/NWPwOXP

(내가 그걸 가지고 놀 수있는 곳)

제가 가지고있는 퍼즐은 왼쪽에있는 눈금 아이콘에 꼭 맞는 숫자 1 2 3 4 버튼 그룹을 원한다는 것입니다. 아이콘이있는 div는 최소 콘텐츠이지만 아이콘보다 훨씬 더 많은 공간을 소비합니다. 내가 여기서 무엇을 놓치고 있습니까? 그리고 min-content는 왜 그리드 셀을 아이콘만큼 넓게 유지하지 않습니까?

Afif 동반

당신이 사용하는 grid-auto-rows이 있어야 할 곳에 grid-template-columns그것은해야 max-content하지 min-content때문에 min-content라인 중단을 고려 폭 최소를 얻고 난 당신이 버튼을 같은 행에 남아한다고 가정합니다.

.lo_buttons {
	grid-area: lo_buttons; 
	display: grid;
	grid-auto-columns: min-content; /* maybe auto-columns here ?*/
	grid-template-columns: max-content max-content max-content 1fr max-content;
	grid-column-gap: 5px;
	grid-template-areas: "lo_reload lo_reload_icon lo_shortcuts lo_space lo_utils";
	/*white-space: nowrap !important; useless*/
}

.lo_reload      { grid-area: lo_reload; }
.lo_reload_icon { grid-area: lo_reload_icon;  }
.lo_shortcuts   { grid-area: lo_shortcuts; }
.lo_utils       { grid-area: lo_utils;  }
.lo_space       { grid-area: lo_space; }

.button_left { 
	float: left; 
	margin-right: 0.5em;
	margin-bottom: 5px;
}

.button_right { 
	float: right; 
	margin-left: 0.5em;
	margin-bottom: 5px;
}

<div class="lo_buttons">
		<div class="lo_reload_icon">
			<img src="https://cdn4.iconfinder.com/data/icons/24x24-free-application-icons/24/Apply.png" style="vertical-align: middle;">
		</div>
		
		<div class="lo_reload">
			<button type="button" class="button_left" id="btnReload">
				<img src="https://cdn2.iconfinder.com/data/icons/c9d/go.png" class="img_button">
			</button>
		</div>
			
		<div class="lo_shortcuts">
		  <button type="button" class="button_left" id="btn1">1</button>
      <button type="button" class="button_left" id="btn2">2</button>
      <button type="button" class="button_left" id="btn3">3</button>
      <button type="button" class="button_left" id="btn4">4</button>
    </div>
			
		<div class="lo_space">
		</div>

		<div class="lo_utils">
		  <button type="button" class="button_right" id="btn1">1</button>
      <button type="button" class="button_right" id="btn2">2</button>
      <button type="button" class="button_right" id="btn3">3</button>
		</div>	
	</div>

나는 당신도 사용하려고 시도 white-space:nowrap했지만 제거해야만 작동 하며이 경우 줄 바꿈을 비활성화했기 때문에 동일한 결과를 얻을 float수 있으므로 유지할 수 있습니다.min-contentmax-content

.lo_buttons {
	grid-area: lo_buttons; 
	display: grid;
	grid-auto-columns: min-content; /* maybe auto-columns here ?*/
	grid-template-columns: min-content min-content min-content 1fr min-content;
	grid-column-gap: 5px;
	grid-template-areas: "lo_reload lo_reload_icon lo_shortcuts lo_space lo_utils";
	white-space: nowrap ;
}

.lo_reload      { grid-area: lo_reload; }
.lo_reload_icon { grid-area: lo_reload_icon;  }
.lo_shortcuts   { grid-area: lo_shortcuts; }
.lo_utils       { grid-area: lo_utils;  }
.lo_space       { grid-area: lo_space; }

.button_left { 
	margin-bottom: 5px;
}

.button_right { 
	margin-bottom: 5px;
}

<div class="lo_buttons">
		<div class="lo_reload_icon">
			<img src="https://cdn4.iconfinder.com/data/icons/24x24-free-application-icons/24/Apply.png" style="vertical-align: middle;">
		</div>
		
		<div class="lo_reload">
			<button type="button" class="button_left" id="btnReload">
				<img src="https://cdn2.iconfinder.com/data/icons/c9d/go.png" class="img_button">
			</button>
		</div>
			
		<div class="lo_shortcuts">
		  <button type="button" class="button_left" id="btn1">1</button>
      <button type="button" class="button_left" id="btn2">2</button>
      <button type="button" class="button_left" id="btn3">3</button>
      <button type="button" class="button_left" id="btn4">4</button>
    </div>
			
		<div class="lo_space">
		</div>

		<div class="lo_utils">
		  <button type="button" class="button_right" id="btn1">1</button>
      <button type="button" class="button_right" id="btn2">2</button>
      <button type="button" class="button_right" id="btn3">3</button>
		</div>	
	</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

CSS 그리드, 열의 가로 간격 : 최소 내용이 예상대로 작동하지 않는 것 같습니다.

CSS 그리드, 열의 가로 간격 : 최소 내용이 예상대로 작동하지 않는 것 같습니다.

JButton의 setLocation이 예상대로 작동하지 않는 것 같습니다.

JButton의 setLocation이 예상대로 작동하지 않는 것 같습니다.

logback의 totalSizeCap이 예상대로 작동하지 않는 것 같습니다.

문자열 연결이 예상대로 작동하지 않는 것 같습니다.

IoTAgent-LoRaWAN이 예상대로 작동하지 않는 것 같습니다.

AMQP.Net Credit이 예상대로 작동하지 않는 것 같습니다.

json 모듈의 Object_hook이 예상대로 작동하지 않는 것 같습니다.

CSS 최소 높이가 Jelly Bean에서 작동하지 않는 것 같습니다.

배경 CSS 속성이 제대로 작동하지 않는 것 같습니다.

iOS 애니메이션 presentationLayer hitTest가 예상대로 작동하지 않는 것 같습니다.

CSS 슬라이드 메뉴가 예상대로 작동하지 않습니다.

`UItableViewCell` 내부의`UIImage`로드가 예상대로 작동하지 않습니다.

Mockito로 Kotlin의 대기열을 조롱하는 것이 작동하지 않는 것 같습니다.

내 C 프로그램의 continue 문이 작동하지 않는 것 같습니다.

정규식 ()에서 문자열을 가져 오는 것이 예상대로 작동하지 않습니다.

Strcmp가 작동하지 않고 왜 그런지 이해하지 못하는 것 같습니다 .ASCII 코드로 변환하면 프로그램이 예상대로 작동합니다.

mkpath File :: Path가 예상대로 작동하지 않는 것 같습니다.

Mockito thenAnswer가 예상대로 작동하지 않는 것 같습니다.

.net core 3.1의 Angular에서 라이브 리로딩이 더 이상 작동하지 않는 것 같습니다.

CSS를 사용하는 드롭 다운 목록이 제대로 작동하지 않음 (항목 간 간격)

CSS calc () 함수가 제대로 작동하지 않는 것 같습니다.

내 로그인 페이지가 전혀 작동하지 않는 것 같습니다

작동하는 트리 탐색 프로그램이 작동하지 않는 것 같습니다.

Python 동작 태그의 Or 논리가 작동하지 않는 것 같습니다.

Java를 사용하여 2D 매트릭스에서 첫 번째 최대 요소를 찾아야하지만 코드가 원하는대로 작동하지 않는 것 같습니다. 누구든지 나를 도울 수 있습니까?

Laravel 4 비밀번호 확인이 예상대로 작동하지 않는 것 같습니다.

Laravel 4 비밀번호 확인이 예상대로 작동하지 않는 것 같습니다.

프로그래밍 방식으로 생성 된 UIControl의 AutoLayout이 작동하지 않는 것 같습니다.

Eclipse 플러그인 폴더에 jar를 배치하는 것이 예상대로 작동하지 않습니다.