-1

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

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

我的 html 和 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>
4

1 回答 1

0

我已经编译了一系列不同的方法来实现 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;
}

*这种方法很好，因为您不会像将子元素设置为 inline-block 那样遇到空格问题。

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

于 2013-08-07T14:30:20.330 回答