-1

Bootstrap 2.0 で Web サイトを構築しています。この写真のように 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