潜水者被推了?3列布局

我正在Bootstrap 2.0上构建我的网站。我正在尝试制作一个3列布局，如下图所示：http://prntscr.com/1jsb2w
问题是div不断被推（我是CSS的新手：）

现在我的页面是这样的：http://prntscr.com/1jscbp

我的html&css（注意，我对html文件做了一些额外的样式，我不包括bootstrap.css，因为我没有对它做任何更改。我不使用外部样式表（除了bootstrap样式表）

 <!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>

我编译了一系列不同的方法来实现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;，它允许你在不影响网格布局的情况下添加填充和边框等。

相关内容

最新更新

热门标签：