Я создаю свой сайт на 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>
-1
Martin Kolarov 7 Авг 2013 в 01:40
1
Могу сразу сказать, что вам нужно улучшить разметку. Никогда не используйте один и тот же id дважды, для этого и предназначен class.
 – 
Dryden Long
7 Авг 2013 в 01:50
Но может ли это быть проблемой?
 – 
Martin Kolarov
7 Авг 2013 в 01:51
Это не проблема, но вполне может быть ее частью.
 – 
Dryden Long
7 Авг 2013 в 01:51
Думаю, я могу просто использовать таблицы для разметки страницы вместо div
 – 
Martin Kolarov
7 Авг 2013 в 01:52
2
Вы должны использовать display:inline-block для трех столбцов div с шириной 33,33333% и иметь div-оболочку, установленную на width:100%;. Или, в качестве альтернативы, установите div-оболочку на display:table;, а для трех дочерних div -ов установите на display:table-cell;
 – 
adaam
7 Авг 2013 в 02:04

1 ответ

Лучший ответ

Я скомпилировал ряд различных методов для достижения трехколоночной компоновки, как того требует OP.

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;, который позволяет вам, помимо прочего, добавлять отступы и границы, не затрагивая макет сетки.

0
adaam 7 Авг 2013 в 18:51