Совместите три изображения, чтобы равномерно распределить их по странице - PullRequest
Новая
       81

Совместите три изображения, чтобы равномерно распределить их по странице

1 голос
/ 17 августа 2011

У меня есть один «основной» div, который обернут вокруг трех дочерних div.Каждый дочерний элемент содержит изображение.Моя цель - чтобы эти три изображения были равномерно выровнены по всей странице.Все изображения имеют одинаковый размер (200 на 166 пикселей).Если есть какой-то способ сделать это без использования дюжины div, это было бы превосходно.Чтобы повторить мой вопрос, я не хочу центрировать все три изображения.Я хочу, чтобы левый img находился в 30 пикселях от левой части страницы;правое изображение должно быть в 30 пикселях от правого края страницы, и я хочу, чтобы центральное изображение было идеально отцентрировано между ними.

HTML: 

    <div id="aboutimages">
        <div id="aboutimgleft">
            <img src="Stylesheets/images/manpc.jpg" alt="" />
        </div>
        <div id="aboutimgcenter">
            <img src="Stylesheets/images/coffee.jpg" alt="" />
        </div>
        <div id="aboutimgright">
            <img src="Stylesheets/images/keyboard.jpg" alt="" />
        </div>
    </div>

CSS: 

#aboutimages{
text-align: center;
    width: 100%;
    margin: 0 auto;
    float:left;
    }

#aboutimgleft img{
    float:left;
    padding-bottom:20px;
    padding-top:20px;
    padding-left:0px;
    width:250px;
} 

#aboutimgcenter {
    margin: 0 auto; 
    width: 70%;
}

#aboutimgcenter img{
    text-align:center;
    width:250px;
    height:166px;
    padding-bottom:20px;
    padding-top:20px;
}

#aboutimgright img{
    float:right;
    padding-bottom:20px;
    padding-top:20px;
    padding-right:0px;
    width:250px;
    height:166px;
}

Я отчаянно нуждаюсь в любой помощи - это расстраивает меня из-за живого ада.

Спасибо,

Эван

Ответы [ 3 ]

4 голосов
/ 17 августа 2011

Есть несколько способов сделать это, вот один из способов: 

#aboutimages {
    position:relative; /* constrain absolutely positioned child elements */
}

#aboutimgleft {
    float:left; /* Float the first element */
    margin-left:30px; /* Here's that 30px you wanted */
} 

#aboutimgcenter {
    margin: 0 auto; /* Center the second element */
}
#aboutimgright {
    /* easier than float:right, but that could work too with some tweaking */
    position:absolute;
    top:0;
    right:30px; /* Here's that other 30px you wanted */
}

Пока изображения находятся в этих div, они будут выровнены.

Демонстрация: http://jsfiddle.net/KPJP4/

0 голосов
/ 17 августа 2011

Один из способов заставить это работать - установить внешнюю оболочку на определенную ширину и установить для нее значение text-align: center;, а затем установить для всех элементов div значение display: inline-block; и с плавающей точкой соответственно. Я настроил здесь тестовую страницу с вашим кодом (немного упрощенным): http://jsbin.com/uworex, чтобы вы могли видеть, как он теперь работает для меня.

0 голосов
/ 17 августа 2011

Это должно сделать это: 

<style type="text/css">
#aboutimgleft, #aboutimgcenter, #aboutimgright {
    float: left; 
    width: 33.33%;
}

#aboutimgleft img {
    margin-left: 30px;
}

#aboutimgcenter {
    text-align: center;
}

#aboutimgright {
    text-align: right;
}

#aboutimgright img {
    margin-right: 30px;
}
</style>
...