두 열 CSS - 오른쪽 열 고정 폭, 왼쪽 열 ariable

"두 열"유형 웹 사이트를 만드는 방법을 알아 내려고 노력했습니다. 글쎄 오른쪽 컬럼이 오른쪽으로 뜬 메인 바디입니다.두 열 CSS - 오른쪽 열 고정 폭, 왼쪽 열 ariable

일반적으로 신체 앞에 여유를두고 몸에 여백을 설정하고 원하는 것을 얻습니다.

Google 및 SEO를 사용하면 텍스트 색인 생성을위한 열보다 우선 순위가 높아야하는 주요 콘텐츠 뒤에 오른쪽 열이 있어야하므로 더 창의적이어야합니다.

가.

그래서 나는 이것을 생각해 낸다.

비판하십시오

<div id="bodycontainer" style="border:1px solid #0f0; width:800px; margin-left:auto; margin-right:auto; overflow:hidden;"> 
<div id="bodyoffset" style="border:1px solid #f00; width:100%; margin-left:-210px; overflow:hidden; float:left;"> 
    <div id"bodyrestrict" style="border:1px solid #ff0; margin-left:210px;"> 
    Main Column<br/> 
    Some text goes here.<br/><br/> 
    I want this column to fill up the remainder space that is filled by the... 
    </div> 
</div> 
<div id="newscolumn" style="border:1px solid #00f; width:200px; float:left;"> 
    ...Right Column 
</div> 
<p style="clear:both;"></p>

이 나에게 의미가의 bodycontainer 우리가 바로 위에 newscolumn을 떠 수 bodyoffset 음의 왼쪽 여백을 가지고, 전체 폭을 제어하지만, bodyrestrict는 제공 신체는 부정적인 마진을 양의 마진으로 상쇄시킴으로써 인라인으로 되돌아 간다.

일부 마술 부두교의 징집하지만 작동하는 것 같습니다.

더 좋은 방법이 있습니까?

필자는 신체 요소가 실제로 있어야하는 항목을 분명히 알지 못합니다 (도움이 될만한 JavaScript 경로를 사용하지 않으려합니다.). 그래서 너비를 100 % -200px 또는 무엇이든 (내가 할 수 있다면 좋을 것)이라고 설정할 수는 없습니다. 그리고 고정 너비를 원하지 않습니다. 화면을 채우기 위해 확장하고 싶습니다.

감사 사이먼

출처

2013-06-18 Simon

이것은 왼쪽 열이 오페라를 노래한다는 것을 의미합니까? –

http://jsfiddle.net/P7vsu/1/을 생각해 냈습니다. 또한, 나는 당신이 작성한 것을 피들에 복사했습니다 : http://jsfiddle.net/KhYLh/. 비록 당신이 원하는 것을 위해 통과하는 것이 많이 보이지만, 당신이 수학을 관리 할 수 있다면 그걸로 가십시오. – asafreedman

당신의 방법은 완벽합니다; 예상대로 작동하지 않는 것이 있습니까? – ProfileTwist

floatting 재미 부정적인 여백을 필요로하지 않는다? 또는 나는 당신이 의미하는 것을 이해하지 못했습니다.

여기

디스플레이를 floatting

와 예 (인라인 블록이 이미 제안되었다)
디스플레이 + 역순이다

(원하는 경우 인라인 블록 작동) : http://codepen.io/anon/pen/xnlGa

디스플레이가 있습니다. 플렉스도 가능하지만 아직 충분하지 않습니다. implem 사실 내 자신의 의견에 ented :)

출처

2013-06-18 17:05:46

두 열 CSS - 오른쪽 열 고정 폭, 왼쪽 열 ariable

답변

관련 문제