1 OP：

Question

我有一个按钮，按下时会显示div。 div使其宽度和高度适应内容，因此宽度和高度都不知道。

div具有position: absolute;样式，因为它需要完全像下拉列表（意思是，它必须重叠/保持在DOM的内容之上）。

有没有办法，没有javascript（没有javascript ），将div放在按钮的不同侧面，具体取决于视口中的可用空间。含义，

如果按钮位于左上角，则div将显示在按钮下方，div的左侧将与按钮的左侧对齐。

/----------------------------\
|                            |
| /--------\                 |
| | button |                 |
| \--------/                 |
| /-------------------\      |
| |                   |      |
| |     div           |      |
| |                   |      |
| |                   |      |
| \-------------------/      |
|                            |
\----------------------------/

如果按钮位于右下角，则div将显示在按钮顶部，这样div的底部将位于按钮顶部，而div的右侧将位于按钮顶部与按钮右侧对齐：

/----------------------------\
|                            |
|                            |
|           /--------------\ |
|           |              | |
|           | div          | |
|           |              | |
|           |              | |
|           \--------------/ |
|                 /--------\ |
|                 | button | |
|                 \--------/ |
\----------------------------/

等等...

示例：

＆＃13;

// Add your javascript here
$(function(){
  
  $('#btn').on("click", function() {
      if($('#content').is(":visible")) {
          $('#content').hide();
      }else{
          $('#content').show();
      }
      
  });
  
});

＆＃13;

/* Put your css in here */

#webpage {
    position: absolute;
    top: 300px;
    left: 200px;
    border: 1px solid green;
}

#btn {
    border: 1px solid red;
}

#content {
    position: absolute;
    display: none;
    height: 50vh;
    width: 200px;
    border-color: 1px solid black;
    background: #999;
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div id="webpage">

        <div id="holder">
            <div id="btn">click me</div>
            <div id="content">content goes here</div>
        </div>
        <br >
        sdfasdgafdegsdefgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgvsdfgvsdfgvsdf        
        
    </div>

  </body>

</html>

＆＃13;

编辑：

所以......似乎有些人无法理解这是一个概念性的问题。让我画几个ASCII艺术：

/----------------------------\
|                            |
| /--------\                 |
| | button |                 |
| \--------/                 |
| /-------------------\      |
| |                   |      |
| |     div           |      |
| |                   |      |
| |                   |      |
| \-------------------/      |
|                            |
\----------------------------/



/----------------------------\
|                            |
|                            |
|           /--------------\ |
|           |              | |
|           | div          | |
|           |              | |
|           |              | |
|           \--------------/ |
|                 /--------\ |
|                 | button | |
|                 \--------/ |
\----------------------------/





/----------------------------------\
|                                  |
|                                  |
|           /--------------\       |
|           |              |       |
|           | div          |       |
|           |              |       |
|           |              |       |
|           \--------------/       |
|                 /--------\       |
|                 | button |       |
|                 \--------/       |
\----------------------------------/




/----------------------------------\
|                                  |
|       /--------\                 |
|       | button |                 |
|       \--------/                 |
|       /-------------------\      |
|       |                   |      |
|       |     div           |      |
|       |                   |      |
|       |                   |      |
|       \-------------------/      |
|                                  |
\----------------------------------/



/----------------------------------\
|                                  |
|                  /--------\      |
|                  | button |      |
|                  \--------/      |
|       /-------------------\      |
|       |                   |      |
|       |     div           |      |
|       |                   |      |
|       |                   |      |
|       \-------------------/      |
|                                  |
\----------------------------------/




/----------------------------------\
|                                  |
|                                  |
|       /--------------\           |
|       |              |           |
|       | div          |           |
|       |              |           |
|       |              |           |
|       \--------------/           |
|       /--------\                 |
|       | button |                 |
|       \--------/                 |
\----------------------------------/


/----------------------------------\
|                                  |
|       /--------\                 |
|       | button |                 |
|       \--------/                 |
|       /-------------------\      |
|       |                   |      |
|       |     div           |      |
|       |                   |      |
|       |                   |      |
|       \-------------------/      |
|                                  |
\----------------------------------/

Answer 1

1 OP：

是否有办法在没有javascript （没有javascript）的情况下，将div放在按钮的不同侧面，具体取决于视口中的可用空间？

2 OP：

按钮可以放在页面的任何位置。视口可以是任何大小。媒体查询在这里没有帮助，因为如果按钮位于不同位置，则div在相同大小的视口中的行为应该不同。

...

不......这只是一个演示。不要看演示的定位！这些是占位符号码。从概念上考虑问题。

3 OP：

显示在DOM中的点（x，y）的左/右对齐的div，具体取决于是否有足够的空间在左侧或右侧显示它。如果点的右侧没有足够的空间，则在点的左侧显示div，否则在右侧显示。顶部/底部相同。

假设最后一个描述，＃3 OP， 是唯一的问题 ，这是我的回答：

OP没有禁止修改HTML，所以我删除了#holder，这被证明是无用的和阻碍。没用，因为下拉不受它的缺席影响。使用flexbox会比需要的更复杂。这两个因素以及它是唯一没有风格的元素这一事实使我得出结论，删除它是安全的。如果OP需要它，那么也许应该在另一个问题中解决。

取决于是否有足够的空间......

...是一个易于由JS处理的条件，并且使用CSS更广泛地处理。 Media queries可以在满足特定条件（如视口）后处理更改样式。我设置了768px的媒体查询，这是移动和桌面之间的通用断点。 OP没有具体说明什么构成足够的空间，所以如果仍然存在空间问题，则必须相应地调整媒体查询。（例如768px至500px）。

我添加了一个没有JS的原始版本的副本（也没有下拉列表），只是为了证明这个解决方案不依赖于JS。

4 OP：

flex direction属性如何改变视口中div的整个位置？

定位由flexbox处理。在默认阶段 - div上的按钮（参见下面的图1），关键属性如下：

#webpage, #webpage2 {
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    align-items: flex-start;
    ...
}

#btn, #btn2 {
    position: relative;
    top: 10px;
    left: 10px;
    ...
    order: 1;
    z-index: 10;
}
#content, #content2 {
    position: relative;
    display: none;
    ...
    order: 2;
}

第二个状态 - div over按钮（见下图2），由视口宽度小于或等于768px触发。满足该条件后，Flexbox属性order和align-items都会更改。媒体查询如下：

@media only screen and (max-width: 768px) {
    #webpage, #webpage2 {
        align-items: flex-end;
    }
    #content, #content2 {
        order: 1;
    }
    #btn, #btn2 {
        order: 2;
    }

请查看代码段并验证媒体查询和flexbox确实提供了一种方法，可以在足够空间的条件下更改元素的位置 （不使用JavaScript）

<强>段

/*
#webpage2, #btn2, and #content2 are just an extension 
of this demo and is not a requirement of solution.
*/

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>35845275</title>
  <style>
    body {
      position: relative;
    }
    #webpage,
    #webpage2 {
      display: flex;
      flex-flow: column nowrap;
      position: relative;
      align-items: flex-start;
      border: 1px solid green;
    }
    #webpage {
      top: 50px;
    }
    #webpage2 {
      top: 150px;
    }
    #btn,
    #btn2 {
      position: relative;
      top: 10px;
      left: 10px;
      border: 1px solid red;
      max-height: 20px;
      max-width: 120px;
      margin: 20px;
      order: 1;
      z-index: 10;
    }
    #content,
    #content2 {
      position: relative;
      display: none;
      height: 50vh;
      width: 200px;
      border-color: 1px solid black;
      background: #999;
      order: 2;
    }
    #content2 {
      display: block;
    }
    @media only screen and (max-width: 768px) {
      #webpage,
      #webpage2 {
        align-items: flex-end;
      }
      #content,
      #content2 {
        order: 1;
      }
      #btn,
      #btn2 {
        order: 2;
      }
  </style>
</head>

<body>
  <div id="webpage">


    <button id="btn">click me</button>
    <section id="content">content goes here
      <p>
        <br>sdfasdgafdegsdefgsdfgsdfgsdfg sdfgsdfgsdfgsdfgsdfgvsdfgv sdfgvsdf

      </p>
    </section>
  </div>



  <div id="webpage2">

    <button id="btn2">#BTN2</button>
    <section id="content2">#CONTENT2 goes here
      <p>
        <br>sdfasdgafdegsdefgsdfgsdfgsdfg sdfgsdfgsdfgsdfgsdfgvsdfgv sdfgvsdf #CONTENT2
      </p>
    </section>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script>
    $(function() {

      $('#btn').on("click", function() {
        if ($('#content').is(":visible")) {
          $('#content').hide();
        } else {
          $('#content').show();
        }

      });

    });
  </script>
</body>

</html>

查看整页模式中推荐的代码段。

图1 - 初始阶段

align-items: flex-start将元素左对齐。

order: 1的{p> #btn和order: 2的{{1}}

#content

图2 - 辅助阶段

/----------------------------\ | | | /--------\ | | | button | | | \--------/ | | /-------------------\ | | | | | | | div | | | | | | | | | | | \-------------------/ | | | \----------------------------/将元素对齐到右边。

align-items: flex-end的{p> order: 2和#btn的{{1}}

order: 1

注意： #content（现已更改为/----------------------------\ | | | | | /--------------\ | | | | | | | div | | | | | | | | | | | \--------------/ | | /--------\ | | | button | | | \--------/ | \----------------------------/）最初用于下拉重叠内容。这可以通过设置需要重叠的内容来实现：将position: absolute和position: relative（n＆lt; 10）设置为您要重叠的元素。

如果OP打算使用除此解决方案和原始问题中禁止的按钮之外的按钮，则需要反转关键属性：

position: relative
z-index: n到适当的元素。

摘要

@MarcosPérezGude建议使用flexbox是有效的。

@Scott Marcus建议使用媒体查询是有效的。

建议

在寻求帮助时，不要忽视所提供的内容，考虑它，测试它并给出有效理由，说明为什么这些建议对您的情况没有帮助。保持你问的问题的参数。如果您告诉我们忽略您自己在问题中提供的内容，那么在您编辑之前（并注意到它已被更改），这会使您的问题无效。

Answer 2

使用CSS3媒体查询。这样，您就可以编写样式规则，将div放置在视口的每个宽度所需的位置。媒体查询的一般语法是：

<style>
   /* Create default style rules here */

   @media screen and (max-width: 1280px) {
     /* place rules that apply to viewports up to 1280px here */
   }

   @media screen and (max-width: 960px) {
     /* place rules that apply to viewports up to 960px here */
   }
</style>

有许多用于设置媒体查询的配置（最小宽度，最大宽度，宽度，最小和最大高度，组合等）。此链接可能有所帮助：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

仅使用CSS控制元素的位置

2 个答案:

1 OP：

2 OP：

3 OP：

4 OP：

摘要

建议