Jump to content

Картинки рядом друг с другом

Paranoia

By Paranoia,
in Freelance

 Share

Recommended Posts

Paranoia Explorer

Paranoia

Posted
Posted

Приветствую. Не могу понять как расположить картинки на странице таким образом:

2i6niqdl0oqg.jpg

По центру страницы, три в ряд сверху (340x264), две рядом ниже (510x357), чтобы они плотно прилегали друг к другу и были зафиксированы (не перемешивались, когда меняется размер экрана браузера).

Link to comment
Share on other sites
Paranoia Explorer

Paranoia

Posted
  • Author
Posted

Спасибо! Есть два вопроса:

Я добавил еще один "лист" картинок:

<body>	<div class="wrap">		<div class="top-block">			<div><img src="1.jpg"/></div>			<div><img src="2.jpg"/></div>			<div><img src="3.jpg"/></div>		</div> 		<div class="bottom-block">			<div><img src="4.jpg"/></div>			<div><img src="5.jpg"/></div>		</div>		<div class="top-block">			<div><img src="1.jpg"/></div>			<div><img src="2.jpg"/></div>			<div><img src="3.jpg"/></div>		</div> 		<div class="bottom-block">			<div><img src="4.jpg"/></div>			<div><img src="5.jpg"/></div>		</div>	</div></body></html>

Между ними появилось пространство:

tc7cd21swift.jpg

Как его можно убрать?

 

 

И при масштабе страницы получается вот такое:

7hk1yt5eodtg.jpg

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

  • Similar Content

    • Evilejik
      Изображение в строку на всю ширину экрана.
      By Evilejik
      Доброго всем дня! Подскажите, пожалуйста, начинающему верстальщику. Как сделать подобное в строку и что бы крайние изображение растягивались на всю ширину экрана, в зависимости от того, какое разрешение у пользователя. К слову, может есть способы не картинками, а блоками сделать подобное? Скриншот прилагаю. 

    • San4ous
      Работа с картинками
      By San4ous
      Привет, подскажите пожалуйста, как мне сделать рамку вокруг изображения, между которыми можно вставить текст (как подпись к картинке), т.е как в Википедии. Если что, работаю в Sulime text html
    • Balalayka
      Помогите с html/css кодом!
      By Balalayka
      Не могу расположить второй ряд картинок все div идут в одну строчку. Пробовал и команду clear (both, left) всем блокам прописан float:left.(Всё в конце кода). Заранее спасибо за помощь.На всякий случай прикреплю ещё картинки.
      index.html
      style.css









    • Andrey_Afonchenko
      Помогите с эффектом наложения
      By Andrey_Afonchenko
      Здравствуйте! Помогите, пожалуйста!
      Есть два блока (div): один с картинкой, а другой с текстом.
      Нужно реализовать: сначала блок с картинкой должен перекрывать блок с текстом, а потом блок с текстом должен перекрывать блок с картинкой.
      Для этого я делал в попытке реализации данного эффекта:
      .image
      {
          display: inline-block;
          Position: absolute;
          z-index: 1;
      }
      @Keyframes block_overlap
      {
          from
          {
              z-index: 0;
          }
          to
          {
              z-index: 2
          }
      }
      .text
      {
          display: inline-block;
          position: absolute;
          animation-name: block_overlap;
          animation-duration: 1s;
      }
      Данный код не привёл к решению проблемы.
       
    • digenis
      Как расположить изображение и текст по левому и правому краю. В заголовке
      By digenis
      style.css

      index.html

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept