Question

我有大约10张图像并排放置，每张图片大小为150x150。每张图片都保存在他们的视线内。图像不适合屏幕。我不希望它们适合屏幕.6张图片后剩下的4张图片来自其他6个图像。我想让它们全部水平对齐并适合scrren. div的宽度和高度与图像大小相同

<style>

.wrapper{

     margin-left: auto;
    margin-right: auto;
    width: 100%;
    height:100%;
    overflow:hidden;
    position:relative;

.zero
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.one
    {
    margin-left:20px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;
.two
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.three
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.four
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.five
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.six
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.seven
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.eight
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.nine
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;


</style>




<body>
<div class="wrapper">

  <div class="zero">
    <img src="images/image.png"/>

    </div>

  <div class="one">
    <img src="images/image.png"/>

    </div>

    <div class="two">
    <img src="images/image.png"/>

    </div>
<div class="three">
    <img src="images/image.png"/>

    </div>
<div class="four">
    <img src="images/image.png"/>

    </div>
<div class="five">
    <img src="images/image.png"/>

    </div>
<div class="six">
    <img src="images/image.png"/>

    </div>
<div class="seven">
    <img src="images/image.png"/>

    </div>
<div class="eight">
    <img src="images/image.png"/>

 </div>
<div class="nine">
    <img src="images/image.png"/>

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

Answer 1

您可以使用 flexbox 解决问题.container {display:flex;}容器的子级将根据可用的大小example增长。

在这里，您会看到添加更多图片不会创建滚动条。默认属性flex-wrap为nowrap，可创建所需的布局。

请记住，该属性不适用于较旧的IE浏览器。

Answer 2

我有一个自动打开，自动关闭的弹出窗口，它是带有三个边框的旋转滑块，其中我必须弄清楚如何使右侧边框和底部边框在滚动条中可见。（最初，滚动条位于底部和右侧三边框的顶部）。

这是我的代码：

.slotholder {
border: 2px solid #000000;
height: calc(100% - 17px) !important; /*minus height of bottom scrollbar*/
width: calc(100% - 17px) !important; /*minus width of bottom scrollbar*/
}
.slotholder:before {
content:"";
position: absolute;
top:5px;
bottom:5px;
left:5px;
right:5px;
border: 2px solid #000000;
}
.slotholder:after {
content:"";
position: absolute;
top:15px;
bottom:15px;
left:15px;
right:15px;
border: 2px solid #000000;
}

如何在没有滚动条的情况下使所有div适合屏幕

2 个答案: