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

将 #containet 更改为 #container ，将 text-align：left; 更改为 text-align：center;

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

Demo in jsfiddle

Answer 2

将css规则float：none更改为float：如果我正确理解你的问题，则右边会这样做。

.content_side {
    float: right;
}

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>

你需要漂浮：左或漂浮：右边你的块（侧面和内容）。

DEMO HERE

更多关于盒子大小的技巧：http://css-tricks.com/box-sizing/

两列布局与对齐的div

3 个答案: