Я пытаюсь сделать 2 деления в одной строке, один с заголовком и <hr>, а другой с изображением, по которому можно щелкнуть, чтобы перейти на другую страницу (даже если я удалю ссылку, проблема сохраняется) , Я ожидал бы, что при выполнении этого кода я получу первый, начинающийся в верхнем левом углу, за которым следует изображение справа, но вместо этого первый <div> просто начинается случайным образом.

#zonaTitlu {
  width: 300px;
  height: 200px;
  display: inline-block;
  background-color: red;
}

#zonaImagine {
  width: 400px;
  height: 400px;
  display: inline-block;
}

.LinieTitlu {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: 50px;
  border-style: inset;
  border-width: 2px;
  border-color: darkgrey;
}

.logo {
  width: 400px;
  height: auto;
}
<body style="background-color:LightGray">
  <div id="zonaTitlu">
    <p>
      <h3>Welcome to LOL Tournaments</h3>
    </p>
    <hr class="LinieTitlu">
  </div>
  <div id="zonaImagine">
    <a href="https://eune.leagueoflegends.com/ro/">
      <img class="logo" src="lol-logo.jpg" alt="LOL logo">
    </a>
  </div>
</body>
0
Alin Catalin Preda 25 Окт 2019 в 22:58

5 ответов

Лучший ответ

Если вы хотите, чтобы оба div рядом, значит попробуйте это и измените ширину изображения на 100%

.zona{
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#zonaTitlu {
  width: 50%;
  height: 200px;
  display: inline-block;
  background-color: red;
}

#zonaImagine {
  width: 50%;
  height: 400px;
  display: inline-block;
}

.LinieTitlu {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: 50px;
  border-style: inset;
  border-width: 2px;
  border-color: darkgrey;
}

.logo {
  width: 400px;
  height: auto;
}
<body style="background-color:LightGray">
<div class="zona">
  <div id="zonaTitlu">
      <h3>Welcome to LOL Tournaments</h3>
    <hr class="LinieTitlu">
  </div>
  <div id="zonaImagine">
    <a href="https://eune.leagueoflegends.com/ro/">
      <img class="logo" src="lol-logo.jpg" alt="LOL logo">
    </a>
  </div>
  </div>
</body>
1
Fussionweb 25 Окт 2019 в 20:19

Вот рабочий пример использования flex-box

<body style="background-color:LightGray">
    <div id="container">
        <div id="zonaTitlu" class="box">
            <p>
                <h3>Welcome to LOL Tournaments</h3>
            </p>
            <hr class="LinieTitlu">
        </div>
        <div id="zonaImagine" class="box">
            <a href="https://eune.leagueoflegends.com/ro/">
                <img class="logo" src="lol-logo.jpg" alt="LOL logo">
            </a>
        </div>
    </div>
</body>

<style>


/*
#zonaTitlu {
  width: 300px;
  height: 200px;
  display: inline-block;
  background-color: red;
}

#zonaImagine {
  width: 400px;
  height: 400px;
  display: inline-block;
}
*/

#container {
    display: flex;
    flex-direction: row;
}

.box {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

.LinieTitlu {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: 50px;
  border-style: inset;
  border-width: 2px;
  border-color: darkgrey;
}

.logo {
  width: 400px;
  height: auto;
}

</style>
0
sao 25 Окт 2019 в 20:32

Пока мне нравятся другие решения (особенно flexbox). У OP, похоже, есть простая проблема, которую нужно исправить: выравнивание встроенного блока по умолчанию с базовой линией (снизу), а содержимое в первом div - это то, что выравнивается по нижней части изображения. Вы видите, что часы выровнены с нижней частью изображения.

Добавление вертикального выравнивания: верх; на любом элементе inline-block это исправляется, и они будут выравниваться сверху. Вот хороший пост SO обо всем вышеупомянутом поведении: Мои элементы встроенных блоков не выстраиваются должным образом

Я не знаю, что вы пытаетесь сделать с фиксированной шириной, поэтому я не собираюсь предлагать другие решения с адаптивным дизайном и все такое - это прямой ответ на ваш вопрос.

#zonaTitlu {
  width: 200px;
  height: 200px;
  display: inline-block;
  background-color: red;
  vertical-align: top; // added this
}

#zonaImagine {
  width: 140px;
  height: 100px;
  display: inline-block;
}

.LinieTitlu {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: 50px;
  border-style: inset;
  border-width: 2px;
  border-color: darkgrey;
}

.logo {
  width: 400px;
  height: auto;
}
<body style="background-color:LightGray">
  <div id="zonaTitlu">
    <p>
      <h3>Welcome to LOL Tournaments</h3>
    </p>
    <hr class="LinieTitlu">
  </div>
  <div id="zonaImagine">
    <a href="https://via.placeholder.com/350x150">
      <img class="logo" src="https://via.placeholder.com/140x100" alt="LOL logo">
    </a>
  </div>
1
MrRobboto 26 Окт 2019 в 15:34

Теперь вы можете настроить все вещи отдельно. TH HR немного устарел. Это также приведет к разрыву строки. Я добавляю подчеркивание к h3, что сделало бы то же самое. Но для полноты я добавляю также HR, который теперь может быть помещен индивидуально css. То же самое для изображения. - Это зависит немного от размера изображения, как сделать корректировки.

            <!DOCTYPE html>
            <html>

                <head>
                    <title>Untitled</title>
                    <style>
                        #zonaTitlu {
                            width: 400px;
                            height: 200px;
                            display: inline-block;
                            background-color: red;
                            display: inline-block;
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            z-index: -1;
                        }

                        #zonaImagine {
                            width: 400px;
                            height: 400px;
                            display: inline-block;

                        }

                        .LinieTitlu {
                            display: block;
                            margin-top: 0.5em;
                            margin-bottom: 0.5em;
                            margin-left: auto;
                            margin-right: 50px;
                            border-style: inset;
                            border-width: 2px;
                            border-color: darkgrey;
                        }

                        .underlined {
                            text-decoration: underline;
                        }

                        .logo {
                            position: relative;
                            width: 400px;
                            height: auto;
                            top: 5px;

                        }

                        .spacer {
                            display: inline-block;
                            width: 30px;
                        }

                        .hr {
                            position: relative;
                            top: 60px;
                            width: 400px;
                            left: 0px"

                        }

                        .para {
                            position: relative;
                            width: 380px;
                            top: 15px;
                        }
                    </style>
                    <style type="text/css">
                        body.c1 {
                            background-color: LightGray
                        }
                    </style>
                </head>

                <body class="c1">
                    <h3 class="underlined">Welcome to LOL Tournaments <a class="logo" href="https://eune.leagueoflegends.com/ro/"><img class="logo" src="lol-logo.jpg" alt="LOL logo"></a></h3>
                    <div id="zonaTitlu">
                        <hr class="hr">
                    </div>
                    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu autem, si
                    tibi illa probabantur, cur non propriis verbis ea tenebas? Mihi enim satis est, ipsis non satis. <i>Eiuro,
                     inquit adridens, iniquum, hac quidem de re;</i> Duo Reges: constructio interrete.</p>
                </body>

            </html>
0
Thomas Ludewig 25 Окт 2019 в 20:34

Смотрится прямо на меня. При необходимости вы можете попробовать использовать таблицу. Div можно удалить

-1
lajit nambiar 25 Окт 2019 в 20:22
58564980