0

我目前有 3 列是流动的，但它们不是均匀的。我想创建四个 25% 的列，它们可以全宽工作并且是流动的。在这里查看并尝试了所有可能的解决方案，但遇到了一堵墙。

这是我的 CSS

body {
    margin:0;
    padding:0;
    border:0;
    width:100%;
    background:#FFFFFF;
    min-width:890px;

}

.threecol .col1 {
    width:46%;
    left:102%;
}
.threecol .col2 {
    width:21%;
    left:31%;
}
.threecol .col3 {
    width:21%;
    left:85%;
}

底部是 3 列，

任何关于制作 3 个偶数列和 4 个偶数列的想法都会很棒！高度赞赏:)

4

4 回答 4

1

http://jsbin.com/ucasip/2/edit给你，用干净的标记完善三和四列。

<section class="four">
  <div class="col1"></div>
  <div class="col2"></div>
  <div class="col3"> </div>
  <div class="col4"></div>
</section>


<section class="three">
<div class="col5"></div>
<div class="col6"></div>
<div class="col7"></div>
</section>



body {
        width:100%;
        margin:0;
        padding:0;
        border:0;
        overflow:hidden; }

       .four> div {
        display:block;
        width:25%;
        height:50%;
        float:left; }

       .three > div {
        display:block;
        width:33.33333%;
        height:50%;
        float:left; }


    .col1 {
    background:#000}

        .col2 {
    background:#222 }

        .col3 {
    background:#444 }
        .col4 {
    background:#666}

      .col5 {background:#334455}
      .col6 {background:#556677}
      .col7 {background:#226655}
于 2013-01-04T12:11:41.577 回答
0 
<div class=col1>1</div>
<div class=col2>2</div>
<div class=col3>3</div>

body {
    margin:0;
    padding:0;
    border:0;
    width:100%;
    background:#FFFFFF;
    min-width:890px;   
}

.col1, .col2, .col3 {
    width:33%;
    float:left;
}

.col1 {
    background-color:#f5f5f5;
}

.col2 {
    background-color:#e5e5e5;
}

.col3 {
    background-color:#d5d5d5;
}
​
于 2013-01-04T11:45:54.753 回答
0

假设您希望列的高度至少为 100%，那么还有这个解决方案：

http://jsbin.com/emujeb/1/edit

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="wrap1">
    <div class="wrap2">
  <div class="col">
   col
  </div>
  <div class="col">
   col
  </div>
  <div class="col">
   col
  </div>
  <div class="col">
   col
  </div>
    </div>
  </div>
</body>


.col {
  width:25%;
  float:left;
}
body { 
  margin:0px;
  padding:0px;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0, #eee),
        color-stop(25%, #eee),
        color-stop(25%, #ccc),
        color-stop(50%, #ccc),
        color-stop(50%, #eee),
        color-stop(75%, #eee),
        color-stop(75%, #ccc),
        color-stop(100%, #ccc)
    );      
    background-image: -webkit-linear-gradient(
        left, 
        #eee, 
        #eee 25%,
        #ccc 25%,
        #ccc 50%,
        #eee 50%,
        #eee 75%,
        #ccc 75%,
        #ccc 100%,
        #eee 100%
    );
    background-image: -moz-linear-gradient(
        left, 
        #eee, 
        #eee 25%,
        #ccc 25%,
        #ccc 50%,
        #eee 50%,
        #eee 75%,
        #ccc 75%,
        #ccc 100%,
        #eee 100%
    );
    background-image: -ms-linear-gradient(
        left, 
        #eee, 
        #eee 25%,
        #ccc 25%,
        #ccc 50%,
        #eee 50%,
        #eee 75%,
        #ccc 75%,
        #ccc 100%,
        #eee 100%
    );
    background-image: -o-linear-gradient(
        left, 
        #eee, 
        #eee 25%,
        #ccc 25%,
        #ccc 50%,
        #eee 50%,
        #eee 75%,
        #ccc 75%,
        #ccc 100%,
        #eee 100%
    );
}

这是通过 css 渐变完成的，但如果您不喜欢背景图像并使用仿列技术，则可以将它们替换。

您需要将 html,body,wrap1,wrap2 设置为 4 列，并使用背景位置 % 来实现。请注意，您将需要长 1px 高的图像来表示颜色，html 将使图像显示为 25% bakcground 颜色透明，body 将显示为 50%，依此类推。

于 2013-01-04T11:57:47.907 回答
0

等高列很容易完成：

.container {
    display: table;
}

.container .col {
    display: table-cell;
    width: 25%;
}

http://jsfiddle.net/sqDng/

于 2013-01-04T12:39:31.937 回答