CSS позиционирование изображения множественным и стайлинг

Question

творю сайт BBC News, используя только HTML и CSS и я закончил в верхней строке меню, но после того, что есть проблема.

Как вы можете видеть на изображении, есть одно большое изображение, выровненное слева и отлично позади текстового заголовка, и есть 4 изображения, которые необходимо выровнять по правой стороне большого изображения, 4 изображения имеют одинаковую высоту и ширина 307 X 107, и на них также написан текст.

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

Answer 1

Awais, если вы проверите сайт BBC с помощью инструментов разработчика, вы можете точно увидеть, как они это сделали. У них есть один контейнер и класс UL с 5 изображениями. Большое изображение занимает 50% от div, а остальные меньшие изображения занимают 25%. Все содержимое затем плавает влево и составляет 100% от ширины div.

Вот краткий фрагмент того, что я сделал: http://codepen.io/anon/pen/BQgpwy

.container { 
 
    height: 600px; 
 
    background-color: black; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#image1 { 
 
    width: 50%; 
 
    height: 600px; 
 
    float: left; 
 
    background-color: blue; 
 
} 
 

 
#image2 { 
 
    width: 25%; 
 
    height: 300px; 
 
    float: left; 
 
    background-color: red; 
 
} 
 

 
#image3 { 
 
    width: 25%; 
 
    height: 300px; 
 
    float: left; 
 
    background-color: purple; 
 
} 
 

 
#image4 { 
 
    width: 25%; 
 
    height: 300px; 
 
    float: left; 
 
    background-color: green; 
 
} 
 

 
#image5 { 
 
    width: 25%; 
 
    float: left; 
 
    background-color: red; 
 
    height: 300px; 
 
}

<div class="container"> 
 
    <ul> 
 
    <li id="image1"></li> 
 
    <li id="image2"></li> 
 
    <li id="image3"></li> 
 
    <li id="image4"></li> 
 
    <li id="image5"></li> 
 
    </ul> 
 
</div>

Answer 2

Хотя HTML структура и изображения не отображаются должным образом в вашей скрипке я попробовал некоторые исправления там. Попробуйте, надеюсь, это поможет вам пойти дальше.

HTML:

Я добавил Div 'gallery1' в сНу галерее ''.

<div id="gallery"> 
    <ul id="bigimg"> 
     <li><img src="images/1.jpg" /></li> 
    </ul> 
    <div id="gallery1"> 

     <ul id="smallimages"> 

     <li><img src="images/2.jpg"></li> 
     <li><img src="images/3.jpg"></li> 
     <li><img src="images/4.jpg"></li> 
     <li><img src="images/5.jpg"></li> 

     </ul> 

    </div> 
</div> 

CSS:

Я изменил эту часть вашего CSS

#headingdiv ul{ 
     display: inline-block; 
} 

#bigimg{ 
    display: inline-block; 
    width: 48%; 
} 

#bigimg img{ 
    width: 100%; 
} 

#gallery1 { 
    display: inline-block; 
    width: 48%; 
} 

#smallimages li { 
    position: relative; 
    display: inline-block; 
    /* width: 100%; */ 
    /* left: 620px; */ 
    /* top: -364px; */ 
    /* margin: 1%; */ 
    text-align: right; 
}