약간 쓰레기 제목으로 죄송합니다. 나는 이것을 더 잘 설명하는 방법을 생각할 수 없었다.
내 사이트에 Google 프렌즈 회원 가젯을 구현하려고합니다 (방금 계획에 들어갔고 적어도 테스트를 위해 큰 재 설계없이 삽입하고 싶습니다).
내 문제는 다음과 같습니다.
기본 페이지 (본문)의 너비가 90 % 인 컨테이너 div가 있습니다. 이 안에 div를 오른쪽으로 띄우고 너비를 300px로 설정하고 그 안에 Google 가젯을 넣습니다. 내가 원하는 것은 div가 Google 가젯 div 왼쪽에 남아있는 공간의 95 %를 채울 수 있도록하는 것입니다.
px와 %를 div 및 너비와 혼합 할 수 있는지 모르겠습니다.
이해가 되길 바랍니다.
감사
답변:
그것은. 반 유체 레이아웃을 찾고 있습니다. 퀘스트는 원래 CSS 구현의 성배였습니다 ...하지만 그 링크에서 볼 수 있듯이 (3 열을 수행하고 2는 고정되었지만 변경하기 쉽습니다) 오랫동안 해결 된 문제입니다 =)
저는 여기저기서 여러 잠재적 인 해결책을 살펴본 후 빠른 실험을했습니다. 내가하려는 것은 유동적이고 고정 된 행과 열을 혼합하는 것이 었습니다.
이것이 내가 끝낸 것입니다.
float 및 clearfix를 피하려면 플렉스 레이아웃을 사용하십시오.
.main {
display: flex;
width: 90%;
}
.col1 {
flex-grow: 1;
}
.col2 {
width: 300px;
margin-left: 5%;
}<div class="main">
<div class="col1" style="background: #518cf3;">Left column</div>
<div class="col2" style="background: #94d0bb;">Right column</div>
</div>참고 : 지원되는 브라우저에서 필요한 경우 가변 공급 업체 접두사를 추가 합니다 .
반응 형 빌드마다 나머지 공간을 확인하고 "나머지"요소의 너비를 동적으로 설정하는 jQuery 또는 JS를 사용하여 알고리즘을 만들어야합니다. 빌드가 응답하지 않는 경우 간단한 수학적 계산을 수행하여 요소 너비를 테스트하고 설정할 수 있습니다.
액체 응답 그리드 기반 미디어 시스템을 구축하는 동안 유사한 문제가 발생했습니다.