0
У меня есть группа из трех элементов. Раздел, содержащий заголовок и элемент div. Теперь я хочу добавить еще один элемент div в элементе div, но когда я делаю это, оба элемента перемещаются вниз (вытесняют с того момента, когда они должны быть).элемент dislocate себя после добавления anotherone внутри
HTML:
<div class="main"><!-- main container -->
<section class="head"><!-- header section -->
<header class="img_header">
<img src="../img/d.jpg">
</header>
<div id="head_container">
<div class="side_header">
<h class="mark">Damian</h> Tuszynski<br>
Network Solutions Architect
<p>
Mobile<br>
</p>
<p>
Email<br>
</p>
</div>
</div>
</section><!-- header section -->
</div>
CSS, для группы заголовка:
.head {
border: 1px solid green;
white-space: nowrap;
width:1900px;
height:900px;
}
.img_header {
border: 1px solid black;
display: inline-block;
width: 600px;
height: 900px;
background-color: #E8E2E2;
position: relative;
}
#head_container {
border: 1px solid orange;
display: inline-block;
width: 1250px;
height: 900px;
}
.img_header img {
width: 230px;
height: 230px;
border-radius: 50%;
display: block;
margin-top: 300px;
margin-left: 280px;
position: relative;
}
.side_header {
border: 1px solid blue;
width: 1250px;
height: 400px;
position: relative;
display: block;
}
.mark {
color: #A1E3D8;
}
, что я здесь отсутствует?
.head {
border: 1px solid green;
\t white-space: nowrap;
\t width:1900px;
\t height:900px;
}
.img_header {
\t border: 1px solid black; \t
\t display: inline-block;
\t width: 600px;
\t height: 900px;
\t background-color: #E8E2E2;
\t position: relative;
}
#head_container {
\t border: 1px solid orange;
\t display: inline-block;
\t width: 1250px;
\t height: 900px;
}
.img_header img {
\t width: 230px;
\t height: 230px;
\t border-radius: 50%;
\t display: block;
\t margin-top: 300px;
\t margin-left: 280px;
\t position: relative;
}
.side_header {
\t border: 1px solid blue;
\t width: 1250px;
\t height: 400px;
\t position: relative;
\t display: block;
}
.mark {
\t color: #A1E3D8;
}<head>
\t <meta charset="UTF-8">
</head>
<body>
\t \t <section class="head"><!-- header section -->
\t \t \t <header class="img_header">
\t \t \t \t <img src="../img/d.jpg">
\t \t \t </header>
\t \t \t <div id="head_container">
\t \t \t \t <div class="side_header">
\t \t \t \t \t <h class="mark">John</h> Snow<br>
\t \t \t \t \t Network Solutions Architect
\t \t \t \t \t <p>
\t \t \t \t \t \t Mobile<br>
\t \t \t \t \t </p>
\t \t \t \t \t <p>
\t \t \t \t \t \t Email<br>
\t \t \t \t \t </p>
\t \t \t \t </div>
\t \t \t </div> \t \t \t
\t \t </section><!-- header section -->
\t \t
</body>
Я положил свой источник в скрипке, но, видимо, мой монитор не является достаточно большим, чтобы визуализировать проблему должным образом. Много полос прокрутки. Итак, вы можете сделать [mcve], что на самом деле демонстрирует проблему? –
Просьба также сообщить, какой браузер и платформу можно посмотреть. – JoostS
Не могли бы вы создать скрипты для «раньше» (рабочий) и «после» (не работает)? – Whothehellisthat