Выравнивание Div изображений по горизонтали - Dreamweaver CS5

<style type="text/css"> 

     div.imageSub { position: relative; } 
     div.imageSub img { z-index: 1; } 
     div.imageSub div { 
     position: absolute; 
     left: 15%; 
     right: 15%; 
     bottom: 0; 
     padding: 4px; 
     } 
     div.imageSub div.blackbg { 
     z-index: 2; 
     color: #000; 
     background-color: #000; 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
     filter: alpha(opacity=50); 
     opacity: 0.5; 
     } 
     div.imageSub div.label { 
     z-index: 3; 
     color: white; 
     } 


    </style> 
    <body> 
     <div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width --> 
     <a href="../../../Downloads/Unnamed Site 2/stem studio.html"><img 
     src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" 
     height="437" /></a> 
     <div class="blackbg">Hello</div> 
     <div class="label"> The Wolf</div> 
    </div><br /> 
    <div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width --><img  
    src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" 
     /> 

     <div class="blackbg">Hello</div> 
     <div class="label"> The Wolf</div> 


    </div> 

    </body> 
    </html> 
    </body> 
    </html>

Я пытаюсь выровнять два изображения div горизонтально.Выравнивание Div изображений по горизонтали - Dreamweaver CS5

Я одолжил код для наложения текста на изображениях с этого сайта:

Я просто добавил случайный рис и текст, чтобы увидеть, если этот код работает, он работает, как прекрасно, но они выходят вертикально. Как выровнять их по горизонтали? Поблагодарите любую помощь.

источник

2012-05-23 user1413772

Я на самом деле пытается получить таблицу 2 х 3. с изображением и наложением текста в каждом окне. Каждый из них будет вкладкой, ссылающейся на страницу. Вот быстрый визуальный: http: //oi50.tinypic.com/2ccqa0l.jpg – user1413772

Если я понял вашу проблему, вам нужно иметь оба изображения бок о бок. Если да, то вам нужно настроить ваш CSS и HTML допустить, что:

Смотрите эту рабочую Fiddle Example!

HTML

<div class="imageSub" style="width: 300px;"> 
    <a href="../../../Downloads/Unnamed Site 2/stem studio.html"> 
    <img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" /> 
    </a> 
    <div class="blackbg">Hello</div> 
    <div class="label"> The Wolf</div> 
</div> 
<div class="imageSub" style="width: 300px;"> 
    <img src="../../../Downloads/Unnamed Site 2/PIC.jpg" alt="Something" width="300" height="437" /> 
    <div class="blackbg">Hello</div> 
    <div class="label"> The Wolf</div> 
</div>

Убрана <br>

CSS

div.imageSub { 
    position: relative; 
    float: left; 
} 
div.imageSub img { 
    z-index: 1; 
} 
div.imageSub div { 
    position: absolute; 
    left: 15%; 
    right: 15%; 
    bottom: 0; 
    padding: 4px; 
} 
div.imageSub div.blackbg { 
    z-index: 2; 
    color: #000; 
    background-color: #000; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
} 
div.imageSub div.label { 
    z-index: 3; 
    color: white; 
}

Добавлено float: left; к div.imageSub

EDITED

Работающий Fiddle Example на основе предыдущего исправления, адаптированный для 3x2 визуального представления.

источник

2012-05-23 23:46:11 Zuul

Спасибо, Зууль. Я на самом деле пытаюсь получить таблицу 2 x 3. с изображением и наложением текста в каждом окне. Каждый из них будет вкладкой, ссылающейся на страницу. Вот краткий обзор: http: //oi50.tinypic.com/2ccqa0l.jpg – user1413772

@ user1413772, просто добавленный в нижней части моего ответа пример, основанный на предыдущем исправлении для презентации 3x2. – Zuul

Снимите <br/>

Добавить правила CSS

.imageSub { float: left;} 
.clear { clear: both; }

Добавить <div class="clear"/> до конца.

Не забудьте шаг 3 в плавающих средах.

jsfiddle

источник

2012-05-23 23:39:52 mayhewr

Вот простое решение DIV 2 х 3 с помощью поплавков: http://jsfiddle.net/Fb6Jk/

источник

2012-05-24 00:05:32 juddlyon

Ничего себе, спасибо большое! Но есть ли способ иметь оверлейный текст с использованием float? Я имею в виду, можете ли вы изменить текст, который будет отображаться на изображении?Я буду очень благодарен! – user1413772

Выравнивание Div изображений по горизонтали - Dreamweaver CS5

ответ

Смежные вопросы