Я создаю свой сайт на 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 ответ
Я скомпилировал ряд различных методов для достижения трехколоночной компоновки, как того требует 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;, который позволяет вам, помимо прочего, добавлять отступы и границы, не затрагивая макет сетки.
Похожие вопросы
Новые вопросы
html
HTML (язык гипертекстовой разметки) — это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы относительно HTML должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто в паре с [CSS] и [JavaScript].
idдважды, для этого и предназначенclass.display:inline-blockдля трех столбцов div с шириной 33,33333% и иметь div-оболочку, установленную наwidth:100%;. Или, в качестве альтернативы, установите div-оболочку наdisplay:table;, а для трех дочерних div -ов установите наdisplay:table-cell;