兩列布局排列格

Question

2 column div layout: right column with fixed width, left fluid

我有同樣的問題，只是在右邊的代碼框變爲第一，第二左

#container { 
    width: 100%; 
    max-width: 1400px; 
    min-width: 1024px; 
    margin: 0 auto; 
    text-align: left; 
} 

/*left block */ 
    .block_side { 
     width: 236px; 
     height: 400px; 
     float: left; 
     margin: 19px 0 0 30px; 
    } 


/* Right block */  
.content_side { 
     float: none; 
     overflow: hidden; 
     width: auto; 
     margin: 0 30px 0 0; 
    } 

content_side是左右block_side，但它們必須按該順序具有文檔

<div id="container"> 
    <div class="content_side"> 
    {CONTENT} 
    </div> 
    <div class="block_side"> 
    {BLOCK} 
    </div> 
</div> 

「content_side」替換應留一個單元，佔據了整個可用寬度

Demo in Jsfiddle

Answer 1

更改CSS規則浮動：無浮動：權會做的伎倆，如果我正確地理解你的問題。

.content_side { 
    float: right; 
} 

Answer 2

變化#containet到的#container和文本對齊：左;至text-align：center;

#container { 
    width: 100%; 
    max-width: 1400px; 
    min-width: 1024px; 
    margin: 0 auto; 
    text-align: center; 
} 

Demo in jsfiddle

Answer 3

CSS

#container { 
    width: 100%; 
    max-width: 1400px; 
    min-width: 1024px; 
    margin: 0 auto; 
    text-align: left; 
    position:relative; 
    height:auto; 
} 

/*left block */ 
    .block_side { 
     width: 256px; 
     height: 400px; 
     float: left; 
     margin: 0px 0 0 30px; 

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 

    background-color:green; 
    } 


/* Right block */  
.content_side { 
     float: right; 
     width: 738px; 
     margin: 0; 
    height:400px; 
    overflow:auto; 

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 

    background-color:red; 
    } 

HTML

<div id="container"> 
    <div class="block_side"> 
    {BLOCK} 
    </div> 
    <div class="content_side"> 
    {CONTENT} 
    </div> 
</div> 

您需要浮動：左或浮動：正確的塊（側nd內容）。

DEMO HERE

更多箱尺寸伎倆在這裏：http://css-tricks.com/box-sizing/