최대 너비와 부동 소수점 divs

내가 갖고있는 것은 3 divs, 1은 왼쪽은 1, 오른쪽은 1입니다. 내가 필요한 것은 3 열입니다. 왼쪽은 항상 중심이지만, 너비는 적응 형이어야합니다. 권리가 존재하는지 여부최대 너비와 부동 소수점 divs

<html> 
<head> 
</head> 
<body> 
    <div style="width:460px; padding:0px 20px;"> 
     <div style="float:left; background: red; width:100px;"> 
      red 
     </div> 
     <div style="float:left; background: yellow; max-width:400px"> 
      yellow 
     </div> 
     <div style="float:left; background: green; width:100px;"> 
      green 
     </div> 
    </div> 
</body> 
</html>

무엇이 잘못 되었나요?

출처

2012-03-07 Y.G.J

콘텐츠 왼쪽에있는 div가 실제로 오른쪽에 있다는 것을 알고 계십니까? ([JS 피들] (http://jsfiddle.net/davidThomas/VZ7aL/)). –

나는 알고있다 - 나는 그 일을 한 번 배우고 싶다. 나는 당신이 나를 대답하고 배경색으로 테두리를 대체 할 수있다. –

내 말은 사실, 그 말은 '... 중간 열 ... '칼럼, 나는 다른 쪽이 어느쪽에있을 예정인지 전혀 모르겠다. HTML을 그대로 유지해야합니까? 적용 할 수 있습니까? –

자바 스크립트 솔루션을 사용하지 않고 CSS와 HTML 만 사용하는 것이 가장 좋은 방법은 열에 클래스 이름을 사용하고 HTML의 순서를 바꾸어서 맨 오른쪽 열은 HTML에서 제 경우 : CSS 인접 형제 선택기 firstSibling + secondSibling 함께

<div class="wrap" style="width:500px"> 
    <div class="col right">Right Column</div> 
    <div class="col left">Left column</div> 
    <div class="col middle">Middle column</div> 
</div> 
<div class="wrap" style="width:500px"> 
    <div class="col left">Left column 2</div> 
    <div class="col middle">Middle column 2</div> 
</div>

, 이는 중간 열의 너비를 수정하는데 사용될 수있다 :

.wrap { 
    width: 500px; 
    margin: 1em auto; 
    overflow: hidden; 
} 

.left, 
.right { 
    width: 100px; 
    background-color: #ffa; 
} 

.middle { 
    width: 400px; 
    background-color: #f90; 
} 

.left, 
.middle { 
    float: left; 
} 

.right { 
    float: right; 
} 

div.right + div.left + div.middle { 
    width: 300px; 
}

JS Fiddle demo. 만약 오른쪽 대신 는 이전 예에서와 같이 좌측 .middle 열 플로트 경우

, 그런 다음 인접 형제 선택기를 단순화하고, HTML을 약간 용이하다 (효과적으로 시각적 반전 인 주는 두 개의 열이 역순으로 먼저오고, 그 가운데 열이 마지막에 오는 것을 특징) 위의 예보다 작업/이해 :

<div class="wrap" style="width:500px"> 
    <div class="col right">Right Column</div> 
    <div class="col middle">Middle column</div> 
    <div class="col left">Left column</div> 
</div> 
<div class="wrap" style="width:500px"> 
    <div class="col left">Left column 2</div> 
    <div class="col middle">Middle column 2</div> 
</div>

그리고 CSS :

.wrap { 
    width: 500px; 
    margin: 1em auto; 
    overflow: hidden; 
} 

.left, 
.right { 
    width: 100px; 
    background-color: #ffa; 
} 

.middle { 
    width: 400px; 
    background-color: #f90; 
} 

.left { 
    float: left; 
} 

.right, 
.middle { 
    float: right; 
} 

div.right + div.middle { 
    width: 300px; 
}

을

JS Fiddle demo.

참고 :

Adjacent sibling selector, at the W3.org.

출처

2012-03-07 19:53:25

내가이 일을 끝내고 - 인접한 형제 자매에 감사드립니다. 전에는 사용하지 않았습니다. 매력처럼 작동합니다 .-) –

대단히 환영합니다. 나는 기꺼이 도와 줬어! =) –

너비는 테두리를 포함하므로이를 고려해야합니다. 가운데 요소의 너비를 약간 줄이면 오른쪽이 줄 바꿈되지 않습니다.

코드에서 "adaptive"인 가운데 너비를 처리 할 수있는 항목은 없습니다.

출처

2012-03-07 19:36:28

알아요 - 제가 방금 예를 들었으니 그 이유를 한 번 배우고 싶습니다. 나를 대답하고 배경색으로 테두리를 바꿀 수 있습니다. –

그렇다면 실제로는 무엇입니까? 문제는 무엇이며 실제 코드는 무엇입니까? 그것이 "적응력있는"부분인가, 그렇다면 적응력을 갖도록 시도한 것은 무엇입니까? –

정확히 무엇을하려는 지 잘 모르겠지만 작동 할 수도 있습니다. 그것이 무엇을해야하는지에 대해 좀 더 자세하게 설명 할 수 있다면 도움이 될 것입니다. 그러나 이것은 당신이 원하는 것을하는 것처럼 보입니다. 오른쪽 열이 표시 : 없음으로 설정된 경우 센터는 여전히 모든 경로를 계속 이동합니다.

<html> 
<head> 
</head> 
<body> 
<div style="width:480px; padding:0px 20px;"> 
    <div style="float:left; background: red; width:100px;"> 
     red 
    </div> 
    <div style="float:right; background: green; width:100px;> 
     green 
    </div> 
    <div style="background: yellow; width:100%;"> 
     yellow 
    </div> 
</div> 
</body> 
</html>

출처

2012-03-07 20:01:30 CDStMichael

최대 너비와 부동 소수점 divs

답변

관련 문제