Question

我的3列布局（960.css）出了问题这是条件：

C-左，C-中心，C-右

中心列中的查询ORDER BY id_post DESC LIMIT 6可以显示多达6篇文章的文章，但是当我使用LIMIT 12时却没有。列右侧将位于下方。

有什么想法吗？

HTML：

    <div class="grid_4">
    <div class="populer_left">
        <div class="title_kiri">
            Berita Terpopuler
        </div>
        <div class="batas_tengah"></div>
        <div class="b_populer">
            <?php include 'beritapopuler.php';?>
        </div>
    </div>
</div>
<div class="grid_7">
    <div class="populer_center">
        <div class="title_tengah">
            Berita Terbaru
        </div>
        <div class="batas_tengah"></div>
        <div class="isi_berita">
            <?php include 'loadar.php'; ?>
        </div>
    </div>
</div>
<div class="grid_5">
    <div class="populer_right">
        <div class="title_kanan">
            Opini
        </div>
        <div class="batas_tengah"></div>
        <div class="b_opini">
          <?php include 'beritaopini.php'; ?> 
        </div>
    </div>
</div>

风格：

.populer_left { 
      float:left;
      width:220px;
      height:auto;
      clear:both;
      padding-bottom:15px;
      background:#29aa6b;
      border-radius:2px;
}

.populer_right {
      float:right;
      width:280px;
      height:auto;
      clear:both;
      padding-bottom:15px;
      background:#3f83ab;
      border-radius:2px;
}

.populer_center {
      float:left;
      display: inline-block;
      vertical-align:top;
      width:400px;
      height:auto;
      background:#0e62aa;
      border-radius:2px;
}

Answer 1

您可以使用display table和table-cell属性。

此处：小提琴 http://jsfiddle.net/LUCNY/10/

#wrapper { border: 2px solid red;overflow:hidden; display: table; width:900px;}
.populer-left { 
  width: 220px; 
  display:table-cell;
  float:left; 
  padding-bottom:15px;
  background:#29aa6b;
  border-radius:2px;
}
.populer-center { 
  display:table-cell;
  width: 400px; 
  float:left; 
  background-color: green; 
  background:#0e62aa;
  padding-bottom:15px;
  border-radius:2px;
}
.populer-right {
  display:table-cell;
  width: 280px; 
  float:left; 
  padding-bottom:15px;
  background:#3f83ab;
  border-radius:2px;
}

如何使CSS 3列保持在他们的位置？

1 个答案: