Question

我想做一个简单的网页，其中有3个div，屏幕左侧有一个垂直，右边有两个div，因此当我缩小窗口宽度时，垂直方向得到更薄，直到达到它的最小宽度，所以两个水平的。只有当它们都达到最小宽度时，如果你继续按比例缩小窗口大小，那么两个水平的那个在垂直下面，一个在另一个下面。

问题是：当我缩小窗口大小时，所有div都会变薄，但是一旦垂直div达到min-width，两个水平的div就会在它下面。

＆＃13;

body{
    margin: 0px;
    padding: 0px;
}

#wra{
    margin: auto;
    width: 99%;
    overflow: hidden;
}

#ver{
    width: 30%;
    height: 700px;
    border: 1px solid green;
    float: left;
    min-width: 300px;
    margin-top: 20px;
}

#or1{
  width: 69%;
  height: 200px;
  border: 1px solid red;
  float: left;
  min-width: 300px;
  margin-top: 20px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
</head>
<body>
  <div id="wra">
    <div id="ver"><p>Vertical Div</p></div>
    <div id="or1"><p>Orizontal Div 1</p></div>
    <div id="or1"><p>Orizontal Div 2</p></div>
  </div>
</body>
</html>

＆＃13;

感谢您的帮助

Answer 1

此行为是垂直元素（#ver）在满足30%声明时占用min-width可用空间不再占用#or1的结果，因此水平元素（69%）不再占用可用空间的@media;迫使它们在垂直元素下面崩溃。

解决方案：

@Media查询

在指定断点处声明@media(max-width: 768px) {...}个查询（例如：flex-box）将是典型响应问题的标准解决方案，例如此问题。

Creating Media Queries for Responsive Web Designs - SitePoint
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website - Smashing Magazine

<强> Flex的盒

flex-box是典型响应问题的流行解决方案，因为它利用内置的浏览器处理来计算元素宽度和可用空间以进行精确对齐 - 它可以完成所有“繁重的工作”，因此您无需（无论如何大部分时间）。

这是一项相当新的技术，因此对旧版浏览器（如IE11及以下版本）的支持有限或根本不存在。如果这对您来说是一个问题，那么我建议为“优雅降级”添加回退样式，或者完全避免使用.horizontal-resize。 请参阅嵌入式代码段下方的链接，以获取浏览器支持和兼容性

代码段示范：

注意：

添加了一个额外的类（.class）以允许用户友好的水平调整大小 - 这是预期的用于演示，应该在作出之前删除生产。
#id选择器已被用于支持id选择器 - 这是通常被认为是更好的做法，因为flex-box属性应该保持唯一，并且非重复。它还具有明显更多重量典型的类选择器，并且将始终过度限定类因此选择器（即使这些类选择器似乎携带更多特异性） - 在尝试声明样式规则时，这可能会导致问题。
已插入另一个包含元素以包装水平元素，这是.wra样式所必需的（在包含父元素flex-box上声明）作为意图 - 因为flex-box有“父母对直系后裔” 关系（display: flex规则不适用于那些元素从包含元素的嵌套元素深度嵌套2个以上 body { margin: 0px; padding: 0px; } .wra { margin: auto; width: 100%; overflow: hidden; box-sizing: border-box; display: flex; flex-wrap: wrap; } /* allows you to resize the containing wrapper element intended for the sake of demonstration only - remove for production */ .horizontal-resize { resize: horizontal; } .ver { height: 700px; border: 1px solid green; min-width: 300px; margin-top: 20px; margin-right: 20px; box-sizing: inherit; flex: 1 1 300px; max-width: 30%; } .or1 { flex: 1 1 300px; max-width: 70%; box-sizing: inherit; } .or1-inner { width: 100%; height: 200px; border: 1px solid red; margin-top: 20px; box-sizing: inherit; }已声明）。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
</head>
<body>
  <div class="wra horizontal-resize">
    <div class="ver"><p>Vertical Div</p></div>
    <div class="or1">
      <div class="or1-inner"><p>Orizontal Div 1</p></div>
      <div class="or1-inner"><p>Orizontal Div 2</p></div>
    </div>
  </div>
</body>
</html>

 function Alert(ctr)
    {
        alert("Hello");
        document.getElementById(ctr).value= "clicked";
    }

跨浏览器兼容性＆amp;支持：

caniuse.com

Using CSS Flexible Boxes - CSS | MDN

Answer 2

这是因为z-index。请先学习然后再申请。那时你会很清楚。 The z-index property specifies the stack order of an element。

缩小窗口大小

2 个答案:

解决方案：