Выравнять блоки и слои

ratus · February 3, 2021

Здравствуйте, Надо поднять <div class="conteiner" На один уровень с <div class="fone35> по высоте. Как это можно сделать?
https://jsfiddle.net/ratus/g879ptjy/23/

Full-R · February 3, 2021

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>store</title>

    <style type="text/css">

      body {
        background: #0a122d;
        margin: 0;
        width: 1000px;
      }

      .wrapper {
        position: relative;
      }

      .fone35 {
        position: absolute;
        display: block;
        width: 400px;
        padding: 2px;
        margin-bottom: 200px;
        margin-left: 1500px;
        margin-right: 20px;
        margin-top: 300px;
      }

      .fone65 {
        display: block;
        width: 300px;
        padding: -2px;
        margin-bottom: 200px;
        margin-left: 300px;
        margin-right: 200px;
        margin-top: 300px;
      }

      .fone75 {
        display: inline;
        margin-bottom: 25%;
        margin-left: 25%;
        margin-right: 25%;
        margin-top: 25%;
      }

      .conteiner {
        position: absolute;
        margin-bottom: 300px;
        margin-left: 400px;
        margin-right: 400px;
        margin-top: 20px;
      }


    </style>

  </head>

  <body>

    <div class="wrapper">

      <div class="fone35">
        <img src="imges/Sound Store-39.png" alt="lom" align="top" /><br />
        <img src="imges/Sound Store-38.png" alt="lom" align="top" /><br />
        <img src="imges/Sound Store-37.png" alt="lom" align="top" /><br />
        <img src="imges/Sound Store-36.png" alt="lom" align="top" /><br />
        <img src="imges/Sound Store-35.png" alt="lom" align="top" />
      </div>
      <div class="conteiner">
        <div class="fone65">
          <img src="imges/Sound Store-59.png" alt="lom" />
          <img src="imges/Sound Store-61.png" alt="lom" />
          <img src="imges/Sound Store-63.png" alt="lom" />
          <img src="imges/Sound Store-65.png" alt="lom" />
        </div>
        <div class="fone75">
          <img src="imges/Sound Store-75.png" alt="lom" />
        </div>
      </div>

    </div>

  </body>

</html>

BR - это плохо. Уже никто не делает clear fix, а больше он ни для чего не нужен. Одними DIV писать уже не интересно. Попробуйте HTML 5.

Container пишется через Э.

Edited February 3, 2021 by Full-R

ratus · February 4, 2021

Спасибо, за помощь, но у меня теперь другой вопрос. Я не понял как без br поставить картинки вертикально ни float ни clear не работают.https://jsfiddle.net/ratus/v375g0kt/1/

Full-R · February 4, 2021

Можно вот так:

		img {

			display: block;

		}

Wrapper лучше не терять. Развалится в другом месте чуть попозже.

position relative можно сразу на body делать, чтобы потом не забывать.

ratus · February 6, 2021

https://jsfiddle.net/ratus/v375g0kt/2/ display: block У обоих слоев <div>, и все равно все в строку.

Sign In

Выравнять блоки и слои

Question

ratus

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Full-R

Link to comment

Share on other sites

ratus

Link to comment

Share on other sites

Full-R

Link to comment

Share on other sites

ratus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information