Нужно выровнять текст с изображениями внутри Divs

Я пытаюсь выровнять заголовок и абзац с изображениями на странице, но мне трудно это сделать. Я хочу две строки, каждая с картинками и вещами, перечисленными выше.Нужно выровнять текст с изображениями внутри Divs

Это формат, который я хочу, но я не могу получить текст, который у меня есть рядом с картинками. Вот код:

h5 { 
 
\t font-family:'Muli', sans-serif; 
 
\t font-size:26px; 
 
\t color:#00ffff; 
 
} 
 
p.par { 
 
\t font-family:sans-serif; 
 
\t font-size:14px; 
 
\t color:#030303; 
 
} 
 
.sample { 
 
\t width:250px; 
 
\t height:250px; 
 
\t 
 
} 
 
#bodywrap { 
 
\t width:1400px; 
 
\t margin:0 auto; 
 
\t clear:both; 
 
} 
 
#firstrow, #secondrow { 
 
\t width:600px; 
 
\t float:left; 
 
\t margin:50px; 
 
}

<div id="bodywrap"> 
 
    <div id="firstrow"> 
 
    <a href="gallery.html"><img src="sample1" alt="Go To Gallery" class="sample"></a> 
 
    <h5>Pictures</h5> 
 
    <p class="par"> 
 
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
 
     ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
     laboris nisi ut aliquip ex ea commodo consequat." 
 
    </p> 
 
    <a href="gallery.html"><img src="sample2" alt="Go To Gallery" class="sample"></a> 
 
    <h5>Pictures</h5> 
 
    <p class="par"> 
 
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
 
     ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
     laboris nisi ut aliquip ex ea commodo consequat." 
 
    </p> 
 
    </div> 
 
    <div id="secondrow"> 
 
    <a href="gallery.html"><img src="sample3" alt="Go To Gallery" class="sample"></a> 
 
    <h5>Pictures</h5> 
 
    <p class="par"> 
 
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
 
     ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
     laboris nisi ut aliquip ex ea commodo consequat." 
 
    </p> 
 
    <a href="gallery.html"><img src="sample4" alt="Go To Gallery" class="sample"></a> 
 
    <h5>Pictures</h5> 
 
    <p class="par"> 
 
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
 
     ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
     laboris nisi ut aliquip ex ea commodo consequat." 
 
    </p> 
 
    </div> \t 
 
</div>

Любая помощь или предложения оценили.

источник

2015-01-14 Tyler Dood

Что вы имеете в виду при выводе? Вы хотите, чтобы текст и фотографии имели одинаковую ширину? Или вы хотите, чтобы текст оставался справа от каждой картинки, выровнен сверху? – Giorgio

Используйте любое приложение для рисования и нарисуйте свое желание, чтобы мы могли правильно понять ваш дизайн. –

Правильно, я хочу текст справа и вверху рядом с фотографиями. Я попытался загрузить картинку, и мне сказали, что у меня недостаточно репутации. –

Я бы обернуть каждый раздел содержимого в контейнере (вы будете иметь больше контроля вниз по дороге, если вы хотите настроить вещи) и плывут ваши a тегов (поскольку они обертывают изображение) слева:

HTML

<div id="bodywrap"> 
    <div id="firstrow"> 
    <div class="wrapper"> 
     <a href="gallery.html"><img src="sample1" alt="Go To Gallery" class="sample"/></a> 
    <h5>Pictures</h5> 
    <p class="par"> 
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
     ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
     laboris nisi ut aliquip ex ea commodo consequat." 
    </p> 
     </div> 
    <div class="wrapper"> 
     <a href="gallery.html"><img src="sample2" alt="Go To Gallery" class="sample"/></a> 
    <h5>Pictures</h5> 
    <p class="par"> 
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
     ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
     laboris nisi ut aliquip ex ea commodo consequat." 
    </p> 
     </div> 
     </div> 
    <div id="secondrow"> 
    <div class="wrapper"> 
     <a href="gallery.html"><img src="sample3" alt="Go To Gallery" class="sample"/></a> 
    <h5>Pictures</h5> 
    <p class="par"> 
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
     ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
     laboris nisi ut aliquip ex ea commodo consequat." 
    </p> 
     </div> 
    <div class="wrapper"> 
     <a href="gallery.html"><img src="sample4" alt="Go To Gallery" class="sample"/></a> 
    <h5>Pictures</h5> 
    <p class="par"> 
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
     ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
     laboris nisi ut aliquip ex ea commodo consequat." 
    </p> 
     </div> 
     </div>  
</div>

CSS

h5 { 
    font-family:'Muli', sans-serif; 
    font-size:26px; 
    color:#00ffff; 
    padding: 0; //clear default 
    margin: 0; //clear default 
} 

.wrapper{ 
    overflow: hidden; //clears the float 
    margin-bottom: 20px; 
} 

a{ 
    float: left; 
    margin-right: 15px; 
}

FIDDLE

источник

2015-01-14 15:58:17 jmore009

Большое вам спасибо, это сработало отлично! –

Нужно выровнять текст с изображениями внутри Divs

ответ

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