html - 超过宽度时,Divs 不会保持在同一行
问题描述
我想在橙色 div 中获取图像(它们是 div)而不是转到下一行,而是让 overflow-y 滚动。问题是,最后两张图片落在下面而不是旁边。通过向下滚动底部图像查看橙色 div 。
images-wrap 绝对位于 test-ar div 内,它以某种方式调整了 test-ar div 的高度。我认为在相对 div 中放置绝对 div 不会调整相对 div 的大小,否则相对 test-ar div 将是保持响应式 1/6 纵横比的完美尺寸。
我尝试过(可能是错误的)将空格设置为不换行、显示内联、溢出-y 等,但无济于事。有任何想法吗?请不要弯曲!
在这里解释会很有帮助,谢谢!
#images-wrap {
width: 100%;
height: auto;
margin-top: 25px;
float: left;
position: relative;
position: static;
}
#main-image {
width: 80.5%;
float: left;
background-size: cover !important;
background-position: center center !important;
height: auto;
padding-bottom: 53.666%;
width: 100%;
padding-bottom: 66.666%;
}
#image-thumbs {
width: 17.5%;
height: auto;
float: left;
margin-left: 2%;
overflow-y: auto !important;
overflow-x: hidden;
position: absolute;
right: 0;
height: 100%;
width: 100%;
margin-left: 0;
position: absolute;
height: auto;
top: 0;
left: 0;
}
.image-thumb {
margin-bottom: 6px;
background-position: center;
background-size: cover;
width: 100%;
height: auto;
padding-bottom: 66.666%;
width: 25%;
padding-bottom: 16.666%;
float: left;
}
#test-ar {
float: left;
width: 100%;
height: auto;
padding-bottom: 16.666%;
background: orange;
position: relative;
overflow-x: scroll;
/* overflow-y: hidden; */
}
<div id="images-wrap">
<div id="main-image" style="background-image: url("https://cml.sad.ukrd.com/image/572806.jpg");"></div>
<div id='test-ar'>
<div id="image-thumbs" style="overflow: hidden;">
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/394545.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/572806.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
</div>
</div>
</div>
解决方案
您将每个的宽度设置为.image-thumb
其父级的 25%。只让 4 个容器连续放置。
您可以使用width: calc(100% /6);
或width: 16.66%;
修复布局。
希望这可以帮助 :)
#images-wrap {
width: 100%;
height: auto;
margin-top: 25px;
float: left;
position: relative;
position: static;
}
#main-image {
width: 80.5%;
float: left;
background-size: cover !important;
background-position: center center !important;
height: auto;
padding-bottom: 53.666%;
width: 100%;
padding-bottom: 66.666%;
}
#image-thumbs {
width: 17.5%;
height: auto;
float: left;
margin-left: 2%;
overflow-y: auto !important;
overflow-x: hidden;
position: absolute;
right: 0;
height: 100%;
width: 100%;
margin-left: 0;
position: absolute;
height: auto;
top: 0;
left: 0;
}
.image-thumb {
margin-bottom: 6px;
background-position: center;
background-size: cover;
width: 100%;
height: auto;
padding-bottom: 66.666%;
width: calc(100% /6);
padding-bottom: 16.666%;
float: left;
}
#test-ar {
float: left;
width: 100%;
height: auto;
padding-bottom: 16.666%;
background: orange;
position: relative;
overflow-x: scroll;
/* overflow-y: hidden; */
}
<div id="images-wrap">
<div id="main-image" style="background-image: url("https://cml.sad.ukrd.com/image/572806.jpg");"></div>
<div id='test-ar'>
<div id="image-thumbs" style="overflow: hidden;">
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/394545.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/572806.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
<div class="image-thumb" style="background-image: url('https://cml.sad.ukrd.com/image/486757.jpg')"></div>
</div>
</div>
</div>
推荐阅读
- windows - 批量查找唯一单词并将 100 行复制到文本文件
- python - 如何在部署 lambda 函数之前删除 ptvsd 调试代码
- mysql - MySQL将数字添加到计数结果中
- javascript - 如何返回作为覆盖对象元素结果的对象
- ionic3 - 首次运行时加载 nativeStorage 的问题
- powershell - 在powershell/batch中按标题分析打开的窗口
- python - 当属性是对象列表时如何识别属性更改
- ruby-on-rails - 如何解析 ActiveSupport::TimeWithZone 的实例以获取日期、工作日、月份和年份?
- firebase - 我使用 google 按钮登录首先进入主页,然后显示登录选项(电子邮件帐户)。在这里做什么?
- regex - 正则表达式:检查某个子字符串是否存在