如何在不同的视口大小下将下拉内容与其按钮对齐?

huangapple go评论138阅读模式
英文:

How to align dropdown-contents to their buttons for different viewport sizes?

问题

我会只返回翻译好的部分,不包括代码。以下是您的内容的翻译:

HTML

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="responsive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Responsive</title>
  </head>

  <header class="header">
    <div class="buttons">
      <h1>Web Developer Portfolio</h1>
      <button class="Login">Login</button>
      <button class="signup">Signup</button>
      <button class="btn" onclick="window.location.href='index.html';"><i class="fa fa-home"></i></button>
    </div>
  </header>

  <body>
    <!-- ATTENTION : start -->

    <div class="row">
      <div class="col-3 col-s-3">
        <div class="pinkContainer">
          <div class="dropdown">
            <button class="dropbtn">About Me</button>
            <div class="dropdown-content">
              <a href="html.html">Developer News</a>
              <a href="motivation.html">What motivates me</a>
              <a href="#">Examples</a>
              <a href="#">Contact Me</a>
            </div>
          </div>

          <div class="dropdown">
            <button class="dropbtn">Portfolio</button>
            <div class="dropdown-content">
              <a href="#">Restaurant</a>
              <a href="#">Lawyer's Office</a>
              <a href="#">Design Office</a>
            </div>
          </div>

          <div class "dropdown">
            <button class="dropbtn">Tutorials</button>
            <div class="dropdown-content">
              <a href="tableofcontent.html">Table of contents</a>
              <a href="#">HTML</a>
              <a href="#">CSS</a>
              <a href="#">JAVASCRIPT</a>
            </div>
          </div>
        </div>
      </div>

      <!-- ATTENTION : end -->

      <div class="col-6 col-s-9">
        <h1>The City</h1>
        <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided into two parts, the old town and the modern city.</p>
      </div>

      <div class="col-3 col-s-12">
        <div class="aside">
          <h2>What?</h2>
          <p>Chania is a city on the island of Crete.</p>
          <h2>Where?</h2>
          <p>Crete is a Greek island in the Mediterranean Sea.</p>
          <h2>How?</h2>
          <p>You can reach Chania airport from all over Europe.</p>
        </div>
      </div>
    </div>

    <div class="footer">
      <p>Resize the browser window to see how the content responds to resizing.</p>
    </div>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  background-color: pink;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header,
.footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  text-align: center;
}

h1 {
  color: white;
  float: left;
  font-family: "Arial Black";
  font-size: 2.3rem;
  margin-top: 10px;
  word-spacing: 5px;
  letter-spacing: 2px;
}

.buttons {
  width: 100%;
  background-color: gold;
  display: inline-block;
}

.Login, .signup, .btn {
  padding: 10px;
  background-color: salmon;
  color: white;
  border-radius: 10px;
  font-size: 18px;
  float: right;
  margin-top: 15px;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.pinkContainer {
  background-color: violet;
  padding: 4px;
  border-radius: 15px;
}

.dropbtn {
  background-color: lightsalmon;
  margin: 3px auto;
  color: yellow;
  padding: 16px;
  cursor: pointer;
  width: 100%;
  font-size: 1em;
  border-radius: 10px;
  border: 1px solid light gray;
}

.dropdown {
  position: relative;
  display: block;
  text-align: center;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  width: 80%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 5px;
  height: 140px;
  overflow: auto;
}

.dropdown-content a {
  color: dark gray;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: salmon;
  border: 2px solid white;
  border-radius: 5px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  .dropbtn {
    width: 50%;
  }
  .dropdown-content {
    width: 40%;
    background-color: lightblue;
  }

  /* For tablets: */
  .col-s-1 {
    width: 8.33%;
  }
  .col-s-2 {
    width: 16.66%;
  }
  .col-s-3 {
    width: 30%;
  }
  .col-s-4 {
    width: 33.33%;
  }
  .col-s-

<details>
<summary>英文:</summary>

I keep changing the position of the dropdown-contents so that they can align with their buttons but I need to make them stick together so on different viewports, I won&#39;t have to change their positions and sizes separately.

For example: in &quot;.dropdown-content&quot; class, I have to set different &quot;left&quot;s for different viewports.  
But I need the width and position of the dropdown-content to stay same as the width and the position of their parents &quot;menu buttons&quot; so I will only need to change the button width on media queries.

I commented &quot;ATTENTION : start&quot; and &quot;ATTENTION : end&quot; on the areas you need to look at.

**HTML**

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en-us&quot;&gt;
      &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot; /&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; /&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;responsive.css&quot;&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
        &lt;title&gt;Responsive&lt;/title&gt;
    
      &lt;/head&gt;
    
      &lt;header class=&quot;header&quot;&gt;
           
            &lt;div class=&quot;buttons&quot;&gt;
             &lt;h1&gt;Web Developer Portfolio&lt;/h1&gt;
             &lt;button class=&quot;Login&quot;&gt;Login&lt;/button&gt;
             &lt;button class=&quot;signup&quot;&gt;Signup&lt;/button&gt;
             &lt;button class=&quot;btn&quot; onclick=&quot;window.location.href=&#39;index.html&#39;;&quot;&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/div&gt;
        
          &lt;/header&gt;
      
      &lt;body&gt;

      &lt;--! ATTENTION : start --&gt; 

    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-3 col-s-3&quot;&gt;
        &lt;div class=&quot;pinkContainer&quot;&gt;
             &lt;div class=&quot;dropdown&quot;&gt;
              &lt;button class=&quot;dropbtn&quot;&gt;About Me&lt;/button&gt;
              &lt;div class=&quot;dropdown-content&quot; &gt;
                &lt;a href=&quot;html.html&quot;&gt;Developer News&lt;/a&gt;
                &lt;a href=&quot;motivation.html&quot;&gt;What motivates me&lt;/a&gt;
                &lt;a href=&quot;#&quot;&gt;Examples&lt;/a&gt;
                &lt;a href=&quot;#&quot;&gt;Contact Me&lt;/a&gt;
              &lt;/div&gt;
             &lt;/div&gt;
            
            &lt;div class=&quot;dropdown&quot;&gt;
              &lt;button class=&quot;dropbtn&quot;&gt;Portfolio&lt;/button&gt;
              &lt;div class=&quot;dropdown-content&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;Restaurant&lt;/a&gt;
                &lt;a href=&quot;#&quot;&gt;Lawyer&#39;s Office&lt;/a&gt;
                &lt;a href=&quot;#&quot;&gt;Design Office&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
    
            &lt;div class=&quot;dropdown&quot;&gt;
              &lt;button class=&quot;dropbtn&quot;&gt;Tutorials&lt;/button&gt;
              &lt;div class=&quot;dropdown-content&quot;&gt;
                &lt;a href=&quot;tableofcontent.html&quot;&gt;Table of contents&lt;/a&gt;
                &lt;a href=&quot;#&quot;&gt;HTML&lt;/a&gt;
                &lt;a href=&quot;#&quot;&gt;CSS&lt;/a&gt;
                &lt;a href=&quot;#&quot;&gt;JAVASCRIPT&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;

      &lt;!-- ATTENTION : end --&gt;

      &lt;div class=&quot;col-6 col-s-9&quot;&gt;
        &lt;h1&gt;The City&lt;/h1&gt;
        &lt;p&gt;Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.&lt;/p&gt;
      &lt;/div&gt;
    
      &lt;div class=&quot;col-3 col-s-12&quot;&gt;
        &lt;div class=&quot;aside&quot;&gt;
          &lt;h2&gt;What?&lt;/h2&gt;
          &lt;p&gt;Chania is a city on the island of Crete.&lt;/p&gt;
          &lt;h2&gt;Where?&lt;/h2&gt;
          &lt;p&gt;Crete is a Greek island in the Mediterranean Sea.&lt;/p&gt;
          &lt;h2&gt;How?&lt;/h2&gt;
          &lt;p&gt;You can reach Chania airport from all over Europe.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;footer&quot;&gt;
      &lt;p&gt;Resize the browser window to see how the content respond to the resizing.&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;/body&gt;
    &lt;/html&gt;

**CSS**

    * {
      box-sizing: border-box;
    }
    
    .row::after {
      content: &quot;&quot;;
      clear: both;
      display: table;
    }
    
    [class*=&quot;col-&quot;] {
      float: left;
      padding: 15px;
      background-color: pink;
    }
    
    html {
      font-family: &quot;Lucida Sans&quot;, sans-serif;
    }
    
      .header,
      .footer {
        border-radius: 5px;
        padding: 10px;
        background-color: rgb(207, 232, 220);
        border: 2px solid rgb(79, 185, 227);
        text-align: center;
      }
    
      h1 {
        color: white;
        float: left;
        /*text-shadow: 2px 2px 1px black, 4px 4px 3px violet, 2px 2px 1px black, 2px 2px 2px black;*/
        font-family: &quot;Arial Black&quot;;
        font-size: 2.3rem;
        margin-top: 10px;
        word-spacing: 5px;
        letter-spacing: 2px;
      }
    
      .buttons {
    
        width: 100%;
        background-color: gold;
        display: inline-block;
    
      }
    
      .Login , .signup , .btn {
        padding: 10px;
        background-color: salmon;
        color: white;
        border-radius: 10px;
        font-size: 18px;
        float: right;
        margin-top: 15px;
    
      }

     .aside {
      background-color: #33b5e5;
      padding: 15px;
      color: #ffffff;
      text-align: center;
      font-size: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      }

     /* ATTENTION : start */
    
    .pinkContainer {
      
       background-color: violet;
       padding: 4px;
       border-radius: 15px;
    
    }
    
      .dropbtn {
        background-color:lightsalmon;
        margin: 3px auto;
        color: yellow;
        padding: 16px;
        cursor: pointer;
        width: 100%;
        font-size: 1em;
        border-radius: 10px;
        border: 1px solid lightgray;
    
      }
    
      .dropdown {
        position: relative;
        display: block;
        text-align: center;
      }
    
      .dropdown-content {
        display: none;
        position: relative;
        background-color: #f9f9f9;
        width: 80%;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        border-radius: 5px;
        height: 140px;
        overflow: auto;
        
    
      }
    
      .dropdown-content a {
        color: darkgrey;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    
      }
    
      .dropdown-content a:hover {background-color: #f1f1f1;}
      .dropdown:hover .dropdown-content {display: block;}
      .dropdown:hover .dropbtn
      {background-color: salmon; border: 2px solid white; border-radius: 5px;}
        
    
    /* For mobile phones: */
    [class*=&quot;col-&quot;] {
      width: 100%;
    }
    
    @media only screen and (min-width: 600px) {
     
     .dropbtn {
      width: 50%;
    }
    .dropdown-content {
      width: 40%;
     background-color: lightblue;
    }
      
      /* For tablets: */
      .col-s-1 {width: 8.33%;}
      .col-s-2 {width: 16.66%;}
      .col-s-3 {width: 30%;}
      .col-s-4 {width: 33.33%;}
      .col-s-5 {width: 41.66%;}
      .col-s-6 {width: 50%;}
      .col-s-7 {width: 58.33%;}
      .col-s-8 {width: 66.66%;}
      .col-s-9 {width: 75%;}
      .col-s-10 {width: 83.33%;}
      .col-s-11 {width: 91.66%;}
      .col-s-12 {width: 100%;}
    }
    
    @media only screen and (min-width: 768px) {
      /* For desktop: */
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
    }
    .dropbtn {
      width: 80%;
    }
    .dropdown-content {
      width: 80%;
      left: 31px;
    }

    /* ATTENTION : end */

</details>


# 答案1
**得分**: 0

你可以使用 JavaScript [Element.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) 然后使用 CSS  `position: absolute` 来将下拉菜单固定在它上面

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象提供有关元素的大小和其相对于视口的位置的信息

```javascript
let rect = my-button.getBoundingClientRect();
let x = window.innerWidth - rect.right;
my-dropdown.style.top = rect.bottom + "px";
my-dropdown.style.right = "8px";
英文:

You can use JavaScript Element.getBoundingClientRect() then use CSS position: absolute to nail the dropdown to it.

The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.

  let rect = my-button.getBoundingClientRect();
let x = window.innerWidth - rect.right;
my-dropdown.style.top = rect.bottom + &quot;px&quot;;
my-dropdown.style.right = &quot;8px&quot;;

huangapple
  • 本文由 发表于 2023年3月12日 08:36:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/75710418.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定