时间戳

首页 > 解决方案 > Divs 坚持比他们的内容更大

html - Divs 坚持比他们的内容更大

问题描述

我的摄影作品集有一个水平滚动的网站，所以为了让人们更容易导航，我让网站在用户垂直滚动时水平滚动成为可能。但是，因为我这样做了，所以持有每个图像的 div 坚持固定宽度并且不符合它们包含的图像的宽度。我对编码相对缺乏经验，因此任何帮助让 div 匹配其图像宽度的帮助将不胜感激。

这是我的 html 和 css

<div class="main-content">
<div class="banner-01 post">
<img src="http://jmatta.com/images/pix/Main/frankell.jpg">
</div>
<div class="banner-02 post">
<img src="http://jmatta.com/images/pix/Main/HMR17.jpg">
</div>
<div class="banner-03 post">
<img src="http://jmatta.com/images/pix/Main/Banes16.jpg">
</div>
<div class="banner-04 post">
<img src="http://jmatta.com/images/pix/Main/scott5.jpg">
</div>
</div>

body {
background: white;
color: black;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
margin: 0;
padding: 0;
font-size: 24px;
}

.main-content{
position:absolute;
display: flex;
flex-direction: column;
top: 50px;
left:250px;
width:700px;
max-height:1150px;
overflow-y:auto;
overflow-x:hidden;
transform:rotate(-90deg) translateY(-700px);
transform-origin:right top;
}

.main-content div{
transform:rotate(90deg) translateX(700px);
transform-origin: right top;
display: inline-block;
}

.main-content img{
max-height: 89vh;
}

标签： htmlcss

解决方案

由于您旋转了图像的父级，因此 div 的高度似乎不遵循所包含图像的高度。我不知道你为什么要旋转main-content. 我删除了所有的旋转和变换（出于某种原因它们是否必要？）并总体上简化了整个代码。img现在div有相同的大小。如果您需要图像之间的间距，只需为图像添加边距。

我相信这是您正在寻找的解决方案： 代码

推荐阅读