Question

#content_2 {position: 
absolute; 
top: 13%; 
left: -10px; 
width: 100%; 
height: 100%; 
z-index: 1;}

#content_image_2 {float: left; 
top: 13%; 
background-color: #ffffff; 
background-repeat: no-repeat; 
width: 70%; 
max-width: 70%; 
height: 30%; 
max-height: 30%; 
border-radius: 10px; 
white-space: nowrap;}

#content_image_2 img{float: right; 
min-height: 40%; 
max-height: 40%; 
width: auto;}

所以我在div中有这些图像。它们被设置为向右浮动。当我缩小屏幕时，它们会包裹并重新调整它们在div中的位置。太守！这就是我想要的，但是当它变得太小时，浮动图像会从div中弹出。我想只是不显示div是否太小，但是当我使用溢出：隐藏时，页面变得疯狂，花车根本不起作用。

有没有人知道解决这个问题的方法？或者可能是另一种方法来实现这一目标？

Answer 1

如果您想要隐藏图像，如果div太小，您可以使用媒体查询。

@media screen and (max-width: 320px) {
   #content_image_2 img{
   display: none;
   }
}

Answer 2

假设您的div有一个id，假设它是my-div。只要它很小，你想隐藏里面的图像：

#my-div.small img {
    display: none;
}

现在，让我们看看我们如何添加/删除small类：

function addClass(id, class) {
    var element = document.getElementById(id);
    if (!!element) {
        //prevent duplication of class name
        removeClass(id, class);
        element.className += " " + class;
    }
}

function removeClass(id, class) {
    var element = document.getElementById(id);
    if (!!element) {
        document.getElementById(id).className = document.getElementById(id).className.replace(/\bMyClass\b/,'');
    }
}

在适当的位置检查width的{{1}}和height，如果它变小，请添加div课程，否则将其删除。

Answer 3

好吧，我只是把桌子变成了另一个div，所有的sizing / overflow css都可以工作。我知道我不应该使用桌子：/

Css浮动......当屏幕缩小时，它就会脱离div

3 个答案: