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。

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

在CSS上有一些注意事项：

原始CSS中有一些错误，类名中有空格，错误的选择器（使用＆＃34;＃＆＃34;用于id，＆＃34;。＆＃34;用于类）
外部Div的宽度为33％，因此它会分发到整个页面。
内部Div左/右浮动，中间有自动边距。
为＆＃34; main＆＃34;添加了最小宽度。 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

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

.col1, .col2 {
float:left;
}

.col3{
float:right;
}

并且你的html有ID而不是类。

Answer 3

您使用类选择器而不是ID选择器#。我创建了example，您无法设置#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 4

将所有div id更改为class。您将所有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 5

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

尝试以下代码： jsFiddle here

<强> 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;
}

3个固定宽度的列，中间的一个

5 个答案: