Я новичок в CSS и прохожу через учебные пособия и т. Д. Все хорошо - но я застрял на маленьком дизайне ниже. Я пытаюсь сделать макет игнорировать горизонтальную рамку с меткой времени, и я пробовал все: float, position absolute, relative, margin и т. Д., И на данный момент я просто бросаю теги без подсказки.Как заставить div игнорировать?
То, что я пытаюсь выполнить, - это вертикальная красная коробка - «линия лидера» для подключения к большому ящику ниже, игнорируя поле «метка времени». Может быть, я плохо структурировал свой HTML, и это усложняет мне выполнение этого?
Это, вероятно, довольно просто. Я также боролся с неравномерным размахом вокруг изображения, но это менее важно.
«Лидерская линия» относится к классу «vAxis». Блок «TimeStamp» относится к классу «timeLabel».
Я сделал codePen, если ниже приведен фрагмент ниже.
Update:
Я просто понял, что я не имеют пытаться игнорировать div с меткой времени. Я могу просто использовать border-left, чтобы продолжить рисовать по вертикали. Не знаю, означает ли это, что я умный, хакерский или просто с мышлением «CSS». Причина, по которой я не мог использовать абсолютный, заключается в том, что я хочу использовать этот код для нескольких компонентов на временной шкале Vis.js - и их вертикальные позиции будут различаться.
Я обновил codepen
Оригинальный вопрос:
body {
background-color: #000;
}
.hAxis {
width: 100%;
height: 10px;
border-bottom: 4px solid #ffffff;
}
.outsideDiv {
position: absolute;
left: 220px;
}
.vAxis {
width: 50px;
height: 100px;
outline: 1px solid red;
border-left: 6px solid rgba(255, 255, 255, .5);
;
}
.box-4 {
background-color: #011c21;
background: -webkit-linear-gradient(90deg, #1A333D 0%, #030506 100%);
border: 6px solid rgba(255, 255, 255, .5);
width: 330px;
padding: 6px;
}
.box-4:hover {
border: 6px solid rgb(255, 255, 255);
}
.box-4:active {
border: 6px solid rgb(255, 255, 0);
}
.imageDiv {
box-align: center;
display: inline-block;
margin-left: 5px;
margin-right: auto;
}
img {
outline: 1px solid #000;
}
.timeLabel {
color: #D0D1D9;
background: transparent;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
margin-bottom: 2px;
text-align: right;
text-shadow: rgb(13, 52, 181) 6px 6px 10px;
outline: 1px solid red;
margin-left: 100px;
width: 250px;
}
.narrative {
color: #cccccc;
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
width: 300px;
position: relative;
padding: 10px;
/* text-shadow: rgb(77, 100, 176) 0px 2px 2px; */
}
html {
height: 100%;
}
body {
background-color: #0e1c21;
/* IE9, iOS 3.2+ */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMxYzM3NDIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, rgb(0, 0, 0)), color-stop(1, rgb(28, 55, 66)));
/* Android 2.3 */
background-image: -webkit-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(28, 55, 66) 100%);
/* IE10+ */
background-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(28, 55, 66) 100%);
}
}<div class="hAxis"></div>
<div class="outsideDiv">
<div class="vAxis"></div>
<div class="timeLabel">04:35:27</div>
<div class="box-4">
<div class="imageDiv">
<img src="http://placehold.it/320x240/0000ff/000000" width='320' height='240' />
</div>
</div>
<div class="narrative">Cras sit amet maximus at libero, at vehicula justo. Cras sit amet maximus libero, at.
</div>
</div>
Добавление позиции: абсолютный; до конца .timeLabel делает то, что вы хотите, я думаю. – Imulate