다음과 같은 것이 있습니다.
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>두 개의 수레가 모두 필요합니다. 콘텐츠 div가 전체 화면에서 메뉴의 100px를 뺀 값을 채우기를 원합니다. float를 사용하지 않으면 div가 정확히 확장됩니다. 그러나 float가 설정되었을 때 어떻게 설정합니까? 내가 좋아하는 sth를 사용하면
style=width:100%그런 다음 콘텐츠 div는 부모의 크기를 가져옵니다. 즉, 본문 또는 내가 시도한 다른 div이므로 물론 메뉴 오른쪽에 맞지 않고 아래에 표시됩니다.
답변:
내가 당신을 올바르게 이해했으면 좋겠습니다 . http://jsfiddle.net/EAEKc/를보십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
margin-left: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>내가 찾은 가장 교차 호환 가능한 방법은 그다지 분명하지 않습니다. 두 번째 열에서 플로트를 제거하고 적용 overflow:hidden해야합니다. 이것은 div 외부로 나가는 모든 콘텐츠를 숨기는 것처럼 보이지만 실제로는 div가 부모 내에 머물도록 강제합니다.
다음은 코드를 사용하여 수행 할 수있는 방법의 예입니다.
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>이것이이 문제가있는 모든 사람에게 유용하기를 바랍니다. 다른 해상도에 맞게 조정하려고 시도한 후 제가 구축 한 사이트에 가장 적합하다고 생각한 것입니다. 안타깝게도 div콘텐츠 뒤에 오른쪽 플로팅을 포함하면 작동하지 않습니다. 좋은 IE 호환성과 함께 작동하는 좋은 방법을 아는 사람이 있다면 매우 기쁩니다.
display: flex;이제 Flexbox 모델이 상당히 광범위하게 구현되었으므로 flex레이아웃에 훨씬 더 많은 가능성을 허용하므로 실제로 대신 사용하는 것이 좋습니다 . 다음은 원본과 같은 간단한 2 열입니다.
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex: 1;">content</div>
</div>그리고 여기에 유연한 너비의 중앙 열이있는 3 열이 있습니다!
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex:1;">content</div>
<div style="width: 100px;">sidebar</div>
</div>.content .right{
overflow: auto;
background-color: red;
}Merkuro의 경우 +1이지만 플로트의 크기가 변경되면 고정 마진이 실패합니다. 위의 CSS를 오른쪽 div에 사용하면 왼쪽 플로트의 크기를 변경하여 크기가 멋지게 변경됩니다. 좀 더 유연합니다. 여기에서 바이올린을 확인하십시오 : http://jsfiddle.net/9ZHBK/144/
overflow: hidden과 overflow auto같은 동작이 발생할. 나는 또한 사람들이 바이올린을 고맙게 생각한다고 생각합니다.
플로팅 된 요소는 일반 흐름 레이아웃에서 제외되며 DIV와 같은 블록 요소는 더 이상 부모의 너비에 걸쳐 있지 않습니다. 이 상황에서 규칙이 변경됩니다. 바퀴를 재창조하는 대신이 사이트에서 두 개의 열 레이아웃을 만드는 몇 가지 가능한 솔루션을 확인하십시오. http://www.maxdesign.com.au/presentation/page_layouts/
특히 "액체 2 단 레이아웃"입니다.
건배!
누구나 관심이 있고 "플로팅"을 좋아하지 않는 경우 HTML 5에 대한 업데이트 된 솔루션입니다.
테이블 및 테이블 셀에 고정 너비를 설정할 수 있으므로이 경우 테이블이 잘 작동합니다.
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}http://jsfiddle.net/EAEKc/596/ @merkuro의 원본 소스 코드
이 사용법은 문제를 해결할 수 있습니다.
width: calc(100% - 100px);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
float: left;
width: calc(100% - 100px);
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>그리고에 따라 merkuro당신이 왼쪽에 하나를 최대화하려는 경우의 솔루션, 당신은 사용해야합니다 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta "charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
margin-right: 100px;
background-color: green;
}
.content .right {
float: right;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
<div class="left">
<p>Hi, Flo!</p>
</div>
</div>
</body>
</html>IE에서 테스트되지 않았으므로 IE에서 깨져 보일 수 있습니다.
허용되는 대답은 작동 할 수 있지만 여백이 겹치는 아이디어가 마음에 들지 않습니다. HTML5에서는 display: flex;. 깨끗한 솔루션입니다. 하나의 요소와 flex-grow: 1;동적 요소 의 너비를 설정하기 만하면됩니다 . merkuros 바이올린의 편집 버전 : https://jsfiddle.net/EAEKc/1499/
안녕하세요 오른쪽 요소에 오버플로 숨김 메서드를 사용하는 쉬운 방법이 있습니다.
.content .left {
float:left;
width:100px;
background-color:green;
}
.content .right {
overflow: hidden;
background-color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Content Menu</title>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo! I am Left</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
<p> It done with overflow hidden and result is same.</p>
</div>
</div>
</body>
</html> 이것은 작동 할 수 있습니다.
div{
display:inline-block;
width:100%;
float:left;
}