Question

我在Bootstrap 2.0上构建我的网站。我试图在这张图片上制作一个3列布局： http://prntscr.com/1jsb2w问题是div不断推送（我是CSS的新手:)

现在我的页面看起来像这样： http://prntscr.com/1jscbp

我的HTML＆amp; css（注意我已经为html文件做了一些额外的设计，我不包括bootstrap.css，因为我没有对它进行任何更改。我没有使用外部样式表（除了自举样式）

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Foxfile</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        margin:50px;
        background-image:url(img/noisy_grey.png);
      }
      #wrapper {
       background-image:url(img/noisy_white.png);
       border-radius:7px;
      }
      #projectList {
        width:100%;
      }
      #projectList p,h1,h2,h3,h4,h5,h6,font,a {
        padding:10px;
      }
      #projectList img {
        margin:10px;
      }
      .circle_preview {
        border-radius:150px;
        background-image:url(img/noisy_grey.png);
        height:30px;
        width:30px;
        padding:10px;
      }
      footer {
        color:#fff;
        margin:10px;
        font-weight:bold;
      }
      .position-center {
        text-align:center;
        position:relative;
      }
    </style>

    <div id='wrapper'>

    <div id='projectList'>
        <div id='projectListTop'>
         <h3> Recent Software </h3>
        </div>
        <a href='#'> <img class='circle_preview' src='img/avast_icon.png'> Avast Security </a> <br />
        <a href='#'> <img class='circle_preview' src='img/itunes_logo.png'> iTunes </a> <br />
        <a href='#'> <img class='circle_preview' src='img/utorrent_logo.jpg'> Avast Security </a> <br />
    </div>
    <div id='projectList' class='position-center'>
        <div id='projectListTop'>
         <h3> Popular Software </h3>
        </div>
        <a href='#'> <img class='circle_preview' src='img/avast_icon.png'> Avast Security </a> <br />
        <a href='#'> <img class='circle_preview' src='img/itunes_logo.png'> iTunes </a> <br />
        <a href='#'> <img class='circle_preview' src='img/utorrent_logo.jpg'> Avast Security </a> <br />
    </div>
    </div>

  </body>
</html>

Answer 1

我已经编译了一系列不同的方法来实现OP所要求的3列布局。

http://jsfiddle.net/adaam2/amxUz/4/

方法1（内嵌块）

<div class="wrapper">
    <div class="inline-block">inline-block</div>
    <div class="inline-block">inline-block</div>
    <div class="inline-block">inline-block</div>
</div>

CSS：

.wrapper {
    width:100%;
}
.inline-block {
    display:inline-block;
    border:1px solid black;
    text-align:center;
    background-color:#eee;
    width:32%;
}

请注意，将元素水平对齐到内联块时会出现空白问题。

方法2（表格+表格单元格）：

<div class="table-wrapper">
    <div class="table-cell">table cell</div>
    <div class="table-cell">table cell</div>
    <div class="table-cell">table cell</div>
</div>

CSS：

.table-wrapper {
    display:table;
    width:100%;
}
.table-cell {
    display:table-cell;
    border:1px solid black;
    width:33%;
    text-align:center;
    background-color:red;
}

方法3（浮动）

<div class="wrapper">
    <div class="float">inline-block</div>
    <div class="float">inline-block</div>
    <div class="float">inline-block</div>
</div>

CSS：

.float {
    float:left;
    width:33%;
    text-align:center;
    background-color:pink;
}

* 此方法很好，因为您没有遇到空白问题，就像将子元素设置为内联块一样。

如果你看看我的JsFiddle，我添加了一些额外的样式，包括box-sizing:border-box;，它允许你在不影响网格布局的情况下添加填充和边框等。

分区正在被推？ 3列布局

1 个答案: