要求
创建一个响应式div,即改变内容的大小但位置完全相同,在我的情况下,改变总线的大小,同时改变头部的大小,保持位置。
在这种情况下,磁头会改变大小,但总线不会。
这是可能的?我正在使用引导程序 3。
(除了主要问题) 是否可以在每个头上添加 DNI 并使其具有响应性?
代码
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');
.parent {
position: relative;
top: 0;
left: 0;
width: 90%;
}
.bus {
position: relative;
top: 0px;
left: 0px;
width:100%;
}
.human1 {
position: absolute;
top: 42%;
left: 364px;
width:4%;
}
.human2 {
position: absolute;
top: 42%;
left: 458px;
width:4%;
}
.human3 {
position: absolute;
top: 42%;
left: 264px;
width:4%;
}
.human4{
position: absolute;
top: 42%;
left: 164px;
width:4%;
}
<div class="parent">
<img class="bus" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX10405102.jpg" />
<img class="human1" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
<img class="human2" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
<img class="human3" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
<img class="human4" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
</div>
您好,一切皆有可能,哈哈,但引导程序不是为它设计的,它适用于 css 及其通常的布局逻辑,但我们按步骤进行。
BUS
是大写的,而在 css 中,是小写的.bus
另一个已经是可选的:
img
在图形标签中,这是一个很好的做法。对于 DNI,它与 head 相同,但这取决于您的设计,请参阅我的建议:
添加一个
span
与 DNI 的内容和与humanX
您要关联的图像相同的类并添加另一个共同的类,例如:dni
。在 css 中,您可以将其调整为所需的高度,并使用所需的字体和大小,以使它们具有响应性,我建议使用测量
vmin
或vmax
,%
或calc
.display:inline-block
在, 中使用span
,以便它可以接受您需要的其他属性,例如transform
或width
。由于数字大的话,小号的空间不够,建议你垂直旋转一下,这样有一定的可读性。
如果您使用与
humanX
要关联的图像相同的类,则此编号将自动放在相同的位置。用你的代码看一个例子:
为什么我向你提到了这个数字?因为您可以利用这种结构:
因此能够完美地将每个 DNI 与每个头对齐,而不必担心其相对于整个总线的位置。
如果您有任何问题,请给我留下您的评论。成功!
@EdgarGutierrez @G3kdigital