gpt4 book ai didi

html - 当网页按比例缩小时,如何使图像堆叠在一起?

转载 作者:太空宇宙 更新时间:2023-11-04 04:19:59 24 4
gpt4 key购买 nike

基本上有两个图像应该位于页面的中央,当页面变小时,这些图像需要垂直堆叠。目前我可以让它们垂直缩放,但我不知道如何将它们居中。如果我使用边距或填充,当页面缩小并且看起来不太好时,它们会留在原位。我需要它们在页面缩小时移向边缘,然后在页面宽度太小时堆叠起来。我这样做是为了让它们在移动设备和较小的分辨率上正确显示。有谁知道最好的方法吗?

这是 html:

<body>
<div class="wrapper">
<div class="wordmark">
<a href="#">
<img src="........." />
</a>
</div>
</div>


<div class="logowrap">
<div class="row">
<ul class="thumbnails">


<div class="logo1">
<li class="span6 home-left">
<a href="#">
<img src="SDI-logo.png" alt="SDI-logo" />
</a>
</li>
</div>

<div class="logo2">
<li class="span6 home-right">
<a href="#">
<img src="Debate-Logo.png" alt="SDI-logo" />
</a>
</li>
</div>

</ul>


</div>
</div>
</body>

这是 CSS:

.navbar {
background-color:#000;
}

.container{


background-color:transparent;


}

.wrapper {
background-color:#000;
}

.wordmark{
max-width:100%;
max-height:100%;
padding-left:15px;
}

.logo1{
float:left;




.logo2 {
float:inherit;


}

.logowrap{


}

最佳答案

我已经稍微修改了你的代码。看看here看看是否对您有帮助 ( http://jsbin.com/UdODawI/1/ )

   .thumbnails {
width: 100%;
margin: 0 auto;
list-style-type: none;
}

.wrapper {
background-color:#000;
}

.logowrap {
margin: 0 auto;
text-align: center;
}

.logo1{
display: inline-block;
}

.logo2 {
display: inline-block;

}

关于html - 当网页按比例缩小时,如何使图像堆叠在一起?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19252057/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com