Расстояние между 3 колонками DIVs - PullRequest
Новая
       1

Расстояние между 3 колонками DIVs

1 голос
/ 19 июля 2011

Вот пример, который я хочу

enter image description here

Эти изображения загружаются из цикла while в MySQL и хотели бы, чтобы расстояние между ними было таким же, как в левом столбце исправа касаются каждой стороны, а середина в центре.Как на картинке: D

CSS у меня есть: 

#realisation .box{
    float:left;
    width:286px;
    background:#fff;
    padding:10px;
    margin-right:20px;
    -moz-box-shadow: 1px 2px 2px #ccc;
    -webkit-box-shadow: 1px 2px 2px #ccc;
    box-shadow: 1px 2px 2px #ccc;
}

#realisation .box:last-child{
    margin-right:0px;
}

И цикл 

<div class="box">
    <div><img src="imgs/beta/imgpasrap.jpg" width="286" height="176"/></div>
    <p>Text here</p>
  </div>

Работает отлично для первых 3 боксов, но более того, дисплей испорчен.Как я могу добиться этого, как на картинке выше?

Ответы [ 4 ]

1 голос
/ 05 ноября 2012 
<div class="className">
    <!-- image -->
</div>

.className{
    width: 80%;
    height: 80%;
 }
1 голос
/ 20 июля 2011

Установите ширину поля, содержащего все эти изображения. (ссылка: http://jsfiddle.net/52TUV/)
(примечание: стили для изображений предназначены только для сохранения их размера - их не нужно добавлять) 

<div id="outer">
    <!-- image HTML stuff goes here -->
</div>

#outer{
    width: 1000px;
}
0 голосов
/ 05 ноября 2012

Используйте этот код: 

<html>
<head>
<style>
body{
background-color:#CCCCCC;
}
.product_image{
    float:left;
    background:#fff;
    padding:10px;
    margin-right:20px;
    margin-bottom:20px;
    -moz-box-shadow: 1px 2px 2px #ccc;
    -webkit-box-shadow: 1px 2px 2px #ccc;
    box-shadow: 1px 2px 2px #ccc;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<?php for($i=1; $i<=9; $i++){ ?>
<div class="product_image"><img src="image.jpg" /></div>
<?php 
if($i%3==0){
echo '<div class=clear></div>';
}
} ?>
</body>
</html>

Замените For Loop на цикл while, а не на то, что вы хотите. Используйте только миниатюру изображения пока

0 голосов
/ 20 июля 2011

Попробуйте это http://www.sohtanaka.com/web-design/css-columns-using-lists/

Селектор: last-child () не поддерживается ни в одном из основных браузеров.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...