4 изображения справа в качестве боковой панели

Я хочу создать жидкостный дизайн с заголовком (полный), большим слайд-шоу изображения слева и 4 изображениями в качестве боковой панели.4 изображения справа в качестве боковой панели

Я хочу сделать боковую панель высотой 100%, с 4 изображениями (которые будут действовать как кнопки). Высота всегда должна быть 100%, поэтому нет прокрутки. Ширина должна автоматически изменяться при изменении размера браузера.

Но я не мог это сделать. Есть ли у вас предложения?

Fiddle

Большое спасибо!

<html> 
<head> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/> 
<style type="text/css"> 
body { 
background-color: #fff; 
padding: 0; 
margin: 0; 
font-family: "Droid Sans", sans-serif; 
width: 100%; 

} 
div#links { 
    float: left; 


} 

div#rechts { 
    float: right; 
    display: block; 
    height: 90%; 
    background-color: grey; 

} 

div#rechts img { 
    height: 25%; 
    width: auto; 
    clear: both; 
} 

div#cat { 
    float: right; 
    clear: both; 
} 


header { 
    height:10%; 
    font-size: large; 
    text-align: center; 
} 

</style> 
</head> 
<body> 
<div id="container"> 
<header id="header">header</header> 

<div id="links"> 
    Content left side 
</div> 
<div id="rechts"> 
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div> 
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div> 
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div> 
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div> 
</div> 
</div> 
</body> 
</html>

источник

2013-09-25 Pieter

пожалуйста, сделайте jsfiddle – MCSI

Это скрипка: HTTP: //jsfiddle.net/jmJba/1/ – Pieter

Использование начальной загрузки 2 или 3 для создания жидкости и отзывчивые сайты просты и удобны в использовании, как только получите повесить его вы можете в значительной степени сделать что-нибудь с начальной загрузки вы можете легко Див их в отдельных сетях, чтобы сделать так, как вы хотел бы.

источник

2013-09-25 14:09:45 user2814461

Спасибо. Bootstrap кажется отличным, я действительно хочу в этом разобраться. Но на данный момент, разве не должно быть легко исправить эту работу? – Pieter

CSS-Tricks является отличным местом, чтобы начать более удобный друг форума также поиск отправить сообщение там, но и показать пример кода, что вы пытаетесь достичь

источник

2013-09-26 09:45:32 user2814461

Я искал там, но не смог найти его. Сейчас у меня это работает во всех браузерах, кроме FF. Изображения продолжают плавать где-то посередине и не прилипают к правой стороне. Что-то делать с ясными или что-то еще? Есть идеи? – Pieter

4 изображения справа в качестве боковой панели

ответ

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