Как разместить 3 divs - 3 части текстовой ссылки на одной строке в левой, центральной и правой частях?
Мне нужно, чтобы он размещался под ссылками на Joomla статьи 3: PREV, INDEX, NEXT - в одной строке... PREV - слева, INDEX - центр и NEXT-right;
Я знаю, что не могу использовать float, потому что нет центра float; если я пытаюсь использовать divs - они снова не на одной строке...
например, я пытался
<div style="width:700px;">
<div style="width:50px; margin-left:20px;">Prev</div>
<div style="width:50px; margin-left:350px;">Index</div>
</div>
Ну вот.
HTML:
<div class="wrapper">
<div class="equal left">PREV</div>
<div class="equal center">INDEX</div>
<div class="equal right">NEXT</div>
</div>
CSS:
.wrapper{width:100%; display:table;}
.equal{display:table-cell;}
.left{text-align:left;}
.center{text-align:center;}
.right{text-align:right;}
Надеюсь это поможет.
Если вы хотите поместить div в центр страницы по горизонтали, вы можете использовать css
margin-left: auto; margin-right:auto;
.master{width:100%; text-align:center; }
.master div{display:inline}
.left{float:left}
.right{float:right}
<div style="width:700px;">
<div style="width:50px; margin-left:20px;display: inline-block;">Prev</div>
<div style="width:50px; margin-left:350px;display: inline-block;">Index</div>
</div>
Вы всегда можете сделать это через список:
HTML:
<ul class="pagination">
<li>Prev</li>
<li>Next</li>
</ul>
CSS:
ul.pagination {
width: 700px;
}
ul.pagination li {
float: left;
list-style: none;
}
Попробуй это
<div class="main">
<div class="div1">
<div class="div2"></div>
<div class=="div3"></div>
</div>
<div class="div4"></div>
</div>
и в css
.div1 {
float:left;
}
.div4 {
float:right;
}
.div2 {
float:left;
}
.div3 {
float:right;
}