3个固定宽度柱，中间中间

Question

我有3列的宽度225px设置为这样：

<div id="main">
     <div id="col1">
         <p>...</p>
    </div>
    <div id="col2">
        <p>...</p>
    </div>
    <div id="col3">
        <p>...</p>
    </div>
</div>

当borowser窗口减小时，我希望Col1向左漂浮，Col3向右漂浮，Col2坐在中间，随着Col2和Col1/2之间的边距调整

我有这个CSS-不起作用！

#main {
    width:100%;
}
.col1,.col2,.col3 {
    width:225px;
}
.col 1, .col2 {
    float:left;
}
.col 3{
    float:right;
}
.col2 {
    margin-left:auto;
    margin-right:auto;
}

Answer 1

这是工作样本：http：//jsfiddle.net/nxrzp/

首先，我在Div。

<div class="main">
    <div class="col">
        <div class="col1">...</div>
    </div>
...

在CSS上有几件事要注意：

• 在您的原始CSS中有一些错误，类名称中的空格和错误的选择器（使用"＃" for ID和"。"。
• 外部div的宽度为33％，因此分布到整页上。
• 内部的div漂浮为左/右，中间有保证金自动。
• 在"主"div中添加了最小宽度，因此列在太狭窄时不会重叠。

这是完整的CSS：

.main {
  width:100%;
  min-width: 700px;
}
.col {
  width:33%;
  float:left; 
}
.col1, .col2, .col3 { 
  width:225px; 
  background-color: #999 
}
.col1  { float:left; }
.col2  { margin: 0 auto; }
.col3  { float: right }

Answer 2

将所有DIV ID更改为类。您将所有Col Div编码为ID http://jsfiddle.net/szp68/2/

 <div id="main">
<div class="col1">
<p>...</p>
</div>
<div class="col2">
<p>...</p>
</div>
<div class="col3">
<p>...</p>
</div>
</div>

Answer 3

您的代码中有太多错误。您在CSS中使用class确实使用id ..

尝试此代码： jsfiddle在这里

html

<div id="main">
    <div id="col1">
        <p>...</p>
    </div>
    <div id="col2">
        <p>...</p>
    </div>
    <div id="col3">
        <p>...</p>
    </div>
</div>

CSS （您可以删除颜色，这里有示例）

#main {
    width:100%;
    background : red;
}
#col1, #col2, #col3 {
    width:33%; // or 225px
    float:left;
}
#col1{
    background:green;
}
#col2{
    background:blue;
}
#col3{
    background:purple;
}

Answer 4

您使用类选择器而不是ID选择器#。我创建一个示例，您无法设置#col2宽度，但是您需要更改HTML：

<div id="main">
     <div id="col1">
         <p>...</p>
    </div>
    <div id="col3">
        <p>...</p>
    </div>
    <div id="col2">
        <p>...</p>
    </div>
</div>

CSS代码：

#col1, #col3 {
    width:225px;
}
#col1  {
    float:left;
}
#col3{
    float:right;
}
#col2 {
    overflow: hidden;
}

Answer 5

删除班级名称中的空格，例如 .col 1：

.col1, .col2 {
float:left;
}
.col3{
float:right;
}

您的HTML具有ID的类别。