堆栈内存溢出
  简体   繁体   English

调整页面大小时的 Div 定位和定位 {Html}

[英]Div Positioning & Positioning at resizing of page {Html}

 原文  2021-01-03 11:44:32  1   3    html/ css/ web

问题描述

I am a beginner level at web programming.我是 web 编程的初学者。 I am trying to make a clone of the google search page.我正在尝试克隆谷歌搜索页面。 I achieved to build the structure of the clone website.我实现了构建克隆网站的结构。

First Problem第一个问题

However, I have trouble with the positioning of the divs.但是，我对 div 的定位有疑问。 I am using form class to search written text, and I want to add the picture of the google logo above this form with a specific margin.我正在使用表格 class 搜索书面文本，我想在此表格上方添加带有特定边距的 google 徽标图片。 I used divs to divide the page to achieve this.我使用 div 来划分页面来实现这一点。 However, when I change the google frame div position all divs are changing with this change.但是，当我更改谷歌框架 div position 时，所有 div 都会随着这个变化而改变。 For example, when I change #oneGoogleBar margin, form and #otherlinks is changing.例如，当我更改#oneGoogleBar 边距时，表单和#otherlinks 正在发生变化。 I could achieve to change #otherlinks by changing its margin value but it is not the solid solution (every time do I need to change it, for example (if I have multiple divs this approach will be very tedious).我可以通过更改其边距值来更改#otherlinks，但这不是可靠的解决方案（例如，每次我都需要更改它（例如，如果我有多个 div，这种方法将非常乏味）。

Second Problem第二个问题

When I resize (make webpage smaller) the #otherlinks starts to move down.当我调整大小（使网页更小）时，#otherlinks 开始向下移动。 I also did not understand that reason.我也不明白这个原因。

I have asked these questions in the same question due to the fact that probably these are beginner-level problems.我在同一个问题中提出了这些问题，因为这些问题可能是初学者级别的问题。 You can find the code below.您可以在下面找到代码。

HTML HTML

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="index_css.css">
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <body>
        <div id="oneGoogleBar">
    <iframe id="backgroundImage" frameBorder = "0"
        src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </iframe>
       </div>
        <div id="form_div">
        <form action="https://google.com/search" class="form">
            <input type ="text" name="q"> <br><br>
            <input type ="submit" value="Google Search">
            <input type ="submit" value ="I'm Feeling Lucky">
        </form>
        </div>
        <div id = "other_links">
        <a href="googleImage.html" class=google_image_page>Google Image Search</a>
        <a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
        </div>
    </body>
</html>

CSS CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
.form{
    text-align: center;
    padding-top:150px;
}
input[type=submit]{
    
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    border-radius:inhterit;
    color: #3c4043;
    font-family: arial,sans-serif;
    font-size: 14px;
    margin: 11px 4px;
    padding: 0 16px;
    line-height: 27px;
    height: 36px;
    min-width: 54px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    padding-left: 25px;
    outline:none;
}

input[type=text]:hover{
    border-color:#9DD9F3;
}


input[type=text]{
    width : 385px;
    height: 25px;
    border-radius: 15px;
    outline:none;
    
}
.google_image_page{
    font-family: arial,sans-serif;
    color:black;
    text-decoration:none;
    font-size:13px;
    
    
}

.google_advanced_page{
    font-family: arial,sans-serif;
    color:black;
    text-decoration:none;
    font-size:13px;
    
}


#other_links{
     margin-top : -40%;
     margin-left : 80%;
     margin-bottom: -85%
 }

 #oneGoogleBar{
     position: relative;
     margin-left : 42%;
     margin-top: 15%;
     max-width:10%;
     max-height: 10%
     
     
 }

3 个解决方案

解决方案1
 0  2021-01-03 12:14:09

You have made your html document very complex which is not required.您使 html 文档变得非常复杂，这不是必需的。 instead of <iframe> you could simply use <img> tag.而不是<iframe>你可以简单地使用<img>标签。 and in your CSS you have used % for margin property, which is making the alignment messy.在您的 CSS 中，您使用 % 作为保证金属性，这使得 alignment 变得混乱。 Take a look at this.看看这个。

HTML File HTML 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <ul>
        <li>Gmail</li>
        <li>Images</li>
      </ul>
    </nav>
    <main>
      <img
        class="logo"
        src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
        alt=""
      />
      <form action="">
        <input type="text" /> <br />
        <br />
        <input type="submit" value="Google Search" />
        <input type="submit" value="I'm Felling Lucky" />
      </form>
    </main>
  </body>
</html>

CSS File CSS 文件

body {
  margin: 0;
  padding: 0;
}

nav ul {
  list-style: none;
  display: flex;
  flex-direction: row-reverse;
}
nav ul li {
  margin: 20px;
}

main {
  align-items: center;
}
.logo {
  display: block;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
}
form {
  text-align: center;
}
input[type="text"] {
  margin-top: 20px;
  width: 385px;
  height: 25px;
  border-radius: 15px;
  outline: none;
}

解决方案2
 0  2021-01-03 13:08:58

You are basically applying margin to each div, so it gets to the place you want it to be.您基本上是在为每个 div 应用边距，因此它可以到达您想要的位置。 Well that is not a very good practice.好吧，这不是一个很好的做法。
Instead of doing this, simply use a而不是这样做，只需使用

display: flex, ...

to achieve what you want.达到你想要的。 And basically in Html, elements are displayed based on their place in your code.基本上在 Html 中，元素是根据它们在代码中的位置显示的。 Meaning, if you want to have a header that has 'Google Image Search' in it, Just write it first.意思是，如果你想要一个 header 里面有“谷歌图片搜索”，那就先写吧。

The reason that the place of your elements changes when you resize the page is, well you are using margin allover the place.调整页面大小时元素位置发生变化的原因是，您在整个地方都使用了边距。 It is only natural that it happens.它发生是很自然的。


I would avoid using iframe, because there is no reason to use it.我会避免使用 iframe，因为没有理由使用它。 Just use a simple img tag in your html.只需在 html 中使用一个简单的 img 标签。


Index.html索引.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <body>
    <main>
        <img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="google-img" />
        <div class="form-div">
            <form action="https://google.com/search" class="form">
                <input type ="text" id="search-field">
                <div>
                    <button>Google Search</button>
                    <button>I'm Feeling Lucky</button>
                </div>
            </form>
        </div>
    </main>        
    </body>
</html>

Style.css:样式.css：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
}

main {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  margin-top: 200px;
}

header {
  display: flex;
  width: 100%;
  align-items: right;
  justify-content: right;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.form-div {
  width: 100%;
  margin-top: 35px;
}

.form div {
  margin-top: 20px;
}

.form div button {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  color: #3c4043;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
}
.form div button:hover {
  cursor: pointer;
}

#search-field {
  width: 80%;
  height: 44px;
  border-radius: 24px;
  border: 1px solid #dfe1e5;
  padding-left: 30px;
}
#search-field:focus {
  outline: none;
}

Just some notes:只是一些注释：

  • In Html and css, you don't use camelCaseNaming, you simply put a - between different parts.在 Html 和 css 中，你没有使用 camelCaseNaming，你只是在不同的部分之间放了一个 -。 So oneGoogleBar should be one-google-bar所以oneGoogleBar应该是one-google-bar
  • Don't use iframe.不要使用 iframe。
  • You shouldn't use <br> for aligning iteams.你不应该使用 <br> 来对齐iteams。 See how I did it using flex box.看看我是如何使用 flex box 的。
  • Name your css file, Style.css.将 css 文件命名为 Style.css。 There is no rule, but usually that 's the way people usually write their code.没有规则，但通常这是人们编写代码的方式。
  • And if you want to build a page that already exists, it's a very good practice to inspect the page.如果你想构建一个已经存在的页面，检查页面是一个很好的做法。 You can learn a ton from it.你可以从中学到很多东西。
  • And the last but the most important thing: Keep up the good work.最后但也是最重要的事情：继续努力。

Edited:编辑：

List of changes:变更清单：

  • I couldn't find any 'Google Image Search' in the google.com, so I just assumed that you want it as header.我在 google.com 中找不到任何“Google 图片搜索”，所以我假设您希望它为 header。 So I placed it on the top.所以我把它放在了上面。
  • I changed the name 'index_css.css' to 'style.css'我将名称“index_css.css”更改为“style.css”
  • I changed the name 'oneGoogleBar' to 'one-google-bar'我将名称“oneGoogleBar”更改为“one-google-bar”
  • I changed the name 'form_div' to 'form-div'我将名称“form_div”更改为“form-div”
  • I changed the name 'other_links' to 'other-links'我将名称“other_links”更改为“其他链接”

I answer your questions in the same order you asked them:我按照您提出的相同顺序回答您的问题：

1- The first element in your Html, is 'one-google-bar'. 1- Html 中的第一个元素是“one-google-bar”。 In Html, first element is above second element, second is above third and... .在 Html 中，第一个元素在第二个元素之上，第二个在第三个元素之上，...... Basically I mean elements appear on the page, based on their place in your code.\基本上我的意思是元素出现在页面上，基于它们在您的代码中的位置。\

Your Html Structure:您的 Html 结构：
1) one-google-bar 1) 一个谷歌酒吧
2) form-div 2）form-div
3) other-links 3) 其他链接

If you change the place of 'one-google-bar', the place of those below it, also changes.如果您更改“one-google-bar”的位置，其下方的位置也会更改。

Solution:解决方案：

You have to work in order.你必须按顺序工作。 Start from the top elements, then move down.从顶部元素开始，然后向下移动。

List of changes:变更清单：

  • I placed 'other-links' above 'one-google-bar', because like I said before, I don't know exactly where you wanted to put it.我在 'one-google-bar' 上方放置了 'other-links'，因为就像我之前说的，我不知道你想把它放在哪里。 I assume you want it in the top part of the page.我假设您希望它位于页面的顶部。
  • I removed the 'other-links' from your css.我从您的 css 中删除了“其他链接”。 Because this element is already in the top part.因为这个元素已经在顶部。
  • I made some changes in your 'one-google-bar' css file.我对您的“one-google-bar”css 文件进行了一些更改。 The changes are as follows:变化如下：

    • I removed 'position: relative'.我删除了“位置：相对”。 because what is it that you want it to get relative to?因为您希望它与什么相关？

    • I assume you first gave it 'margin-left: 50%' and since it didn't get placed in the middle (because the image takes some place too) you changed it to 'margin-left: 42%'.我假设你首先给它'margin-left：50％'，因为它没有放在中间（因为图像也有一些地方）你把它改成了'margin-left：42％'。

      Well there is a neat trick to put the element in the middle:那么有一个巧妙的技巧将元素放在中间：

margin: 0 auto;边距：0 自动；

  • With this, you set the top and bottom margin to 0. And browser automatically sets the right and left margin in a way that the element is placed in the middle.这样，您将顶部和底部边距设置为 0。浏览器会自动设置左右边距，使元素位于中间。
    Now below that, change the top and bottom margin as you please.现在在它下面，随意更改顶部和底部边距。
  • I also changed 'max-width: 10%' to:我还将“最大宽度：10%”更改为：

width: fit-content;宽度：适合内容；

Not the right way to use max-width.不是使用最大宽度的正确方法。

2- You said that you don't realize why all elements move when you resize the page. 2-您说您没有意识到为什么在调整页面大小时所有元素都会移动。
In your 'one-google-bar', you have:在您的“one-google-bar”中，您有：

margin-top: 150px;边距顶部：150px；

That % is the reason this happens.该 % 是发生这种情况的原因。 This means add 15% of the current width to the top margin, and since you change the width, it also changes.这意味着将当前宽度的 15% 添加到上边距，并且由于您更改了宽度，因此它也会更改。 Thus the whole page moves (because elements are placed in order...).因此整个页面移动（因为元素是按顺序放置的......）。

Solution:解决方案：

Simply use px instead of %.只需使用 px 而不是 %。

List of changes:变更清单：

  • I changed 'margin-top: 15%' to:我将 'margin-top: 15%' 更改为：

margin-top: 15%;最高保证金：15%；

Index.html:索引.html:

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <body>
        <div id = "other-links">
            <a href="googleImage.html" class=google_image_page>Google Image Search</a>
            <a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
        </div>
        <div id="one-google-bar">
            <iframe id="backgroundImage" frameBorder = "0"
                src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
            </iframe>
       </div>
        <div id="form-div">
            <form action="https://google.com/search" class="form">
                <input type ="text" name="q"> <br><br>
                <input type ="submit" value="Google Search">
                <input type ="submit" value ="I'm Feeling Lucky">
            </form>
        </div>
        
    </body>
</html>

style.css:样式.css：

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
.form {
  text-align: center;
  padding-top: 150px;
}
input[type="submit"] {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  border-radius: inhterit;
  color: #3c4043;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  padding-left: 25px;
  outline: none;
}

input[type="text"]:hover {
  border-color: #9dd9f3;
}

input[type="text"] {
  width: 385px;
  height: 25px;
  border-radius: 15px;
  outline: none;
}
.google_image_page {
  font-family: arial, sans-serif;
  color: black;
  text-decoration: none;
  font-size: 13px;
}

.google_advanced_page {
  font-family: arial, sans-serif;
  color: black;
  text-decoration: none;
  font-size: 13px;
}

/* #other-links {           //REMOVED
  margin-top: -40%;         //REMOVED
  margin-left: 80%;         //REMOVED
  margin-bottom: -85%;      //REMOVED
} */

#one-google-bar {
  /* position: relative;     //REMOVED       
  margin-left: 42%;          //REMOVED   
  margin-top: 15%;           //REMOVED           
  max-width: 10%;            //REMOVED       
  max-height: 10%;           //REMOVED  
  */
  width: fit-content;        /*ADDED*/                    
  margin: 0 auto;            /*ADDED*/                    
  /* margin-top: 15%;        //REMOVED*/
  margin-top: 150px;         /*ADDED*/   
}

解决方案3
 0 已采纳  2021-01-05 16:27:30

Edited:编辑：

List of changes:变更清单：

  • I couldn't find any 'Google Image Search' in the google.com, so I just assumed that you want it as header.我在 google.com 中找不到任何“Google 图片搜索”，所以我假设您希望它为 header。 So I placed it on the top.所以我把它放在了上面。
  • I changed the name 'index_css.css' to 'style.css'我将名称“index_css.css”更改为“style.css”
  • I changed the name 'oneGoogleBar' to 'one-google-bar'我将名称“oneGoogleBar”更改为“one-google-bar”
  • I changed the name 'form_div' to 'form-div'我将名称“form_div”更改为“form-div”
  • I changed the name 'other_links' to 'other-links'我将名称“other_links”更改为“其他链接”

I answer your questions in the same order you asked them:我按照您提出的相同顺序回答您的问题：

1- The first element in your Html, is 'one-google-bar'. 1- Html 中的第一个元素是“one-google-bar”。 In Html, first element is above second element, second is above third and... .在 Html 中，第一个元素在第二个元素之上，第二个在第三个元素之上，...... Basically I mean elements appear on the page, based on their place in your code.\基本上我的意思是元素出现在页面上，基于它们在您的代码中的位置。\

Your Html Structure:您的 Html 结构：
1) one-google-bar 1) 一个谷歌酒吧
2) form-div 2）form-div
3) other-links 3) 其他链接

If you change the place of 'one-google-bar', the place of those below it, also changes.如果您更改“one-google-bar”的位置，其下方的位置也会更改。

Solution:解决方案：

You have to work in order.你必须按顺序工作。 Start from the top elements, then move down.从顶部元素开始，然后向下移动。

List of changes:变更清单：

  • I placed 'other-links' above 'one-google-bar', because like I said before, I don't know exactly where you wanted to put it.我在 'one-google-bar' 上方放置了 'other-links'，因为就像我之前说的，我不知道你想把它放在哪里。 I assume you want it in the top part of the page.我假设您希望它位于页面的顶部。
  • I removed the 'other-links' from your css.我从您的 css 中删除了“其他链接”。 Because this element is already in the top part.因为这个元素已经在顶部。
  • I made some changes in your 'one-google-bar' css file.我对您的“one-google-bar”css 文件进行了一些更改。 The changes are as follows:变化如下：

    • I removed 'position: relative'.我删除了“位置：相对”。 because what is it that you want it to get relative to?因为您希望它与什么相关？

    • I assume you first gave it 'margin-left: 50%' and since it didn't get placed in the middle (because the image takes some place too) you changed it to 'margin-left: 42%'.我假设你首先给它'margin-left：50％'，因为它没有放在中间（因为图像也有一些地方）你把它改成了'margin-left：42％'。

      Well there is a neat trick to put the element in the middle:那么有一个巧妙的技巧将元素放在中间：

margin: 0 auto;边距：0 自动；

  • With this, you set the top and bottom margin to 0. And browser automatically sets the right and left margin in a way that the element is placed in the middle.这样，您将顶部和底部边距设置为 0。浏览器会自动设置左右边距，使元素位于中间。
    Now below that, change the top and bottom margin as you please.现在在它下面，随意更改顶部和底部边距。
  • I also changed 'max-width: 10%' to:我还将“最大宽度：10%”更改为：

width: fit-content;宽度：适合内容；

Not the right way to use max-width.不是使用最大宽度的正确方法。

2- You said that you don't realize why all elements move when you resize the page. 2-您说您没有意识到为什么在调整页面大小时所有元素都会移动。
In your 'one-google-bar', you have:在您的“one-google-bar”中，您有：

margin-top: 150px;边距顶部：150px；

That % is the reason this happens.该 % 是发生这种情况的原因。 This means add 15% of the current width to the top margin, and since you change the width, it also changes.这意味着将当前宽度的 15% 添加到上边距，并且由于您更改了宽度，因此它也会更改。 Thus the whole page moves (because elements are placed in order...).因此整个页面移动（因为元素是按顺序放置的......）。

Solution:解决方案：

Simply use px instead of %.只需使用 px 而不是 %。

List of changes:变更清单：

  • I changed 'margin-top: 15%' to:我将 'margin-top: 15%' 更改为：

margin-top: 15%;最高保证金：15%；

Index.html:索引.html:

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
    <head>
        <title>Search</title>
    </head>
    <body>
        <div id = "other-links">
            <a href="googleImage.html" class=google_image_page>Google Image Search</a>
            <a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
        </div>
        <div id="one-google-bar">
            <iframe id="backgroundImage" frameBorder = "0"
                src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
            </iframe>
       </div>
        <div id="form-div">
            <form action="https://google.com/search" class="form">
                <input type ="text" name="q"> <br><br>
                <input type ="submit" value="Google Search">
                <input type ="submit" value ="I'm Feeling Lucky">
            </form>
        </div>
        
    </body>
</html>

style.css:样式.css：

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
.form {
  text-align: center;
  padding-top: 150px;
}
input[type="submit"] {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  border-radius: inhterit;
  color: #3c4043;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  padding-left: 25px;
  outline: none;
}

input[type="text"]:hover {
  border-color: #9dd9f3;
}

input[type="text"] {
  width: 385px;
  height: 25px;
  border-radius: 15px;
  outline: none;
}
.google_image_page {
  font-family: arial, sans-serif;
  color: black;
  text-decoration: none;
  font-size: 13px;
}

.google_advanced_page {
  font-family: arial, sans-serif;
  color: black;
  text-decoration: none;
  font-size: 13px;
}

/* #other-links {           //REMOVED
  margin-top: -40%;         //REMOVED
  margin-left: 80%;         //REMOVED
  margin-bottom: -85%;      //REMOVED
} */

#one-google-bar {
  /* position: relative;     //REMOVED       
  margin-left: 42%;          //REMOVED   
  margin-top: 15%;           //REMOVED           
  max-width: 10%;            //REMOVED       
  max-height: 10%;           //REMOVED  
  */
  width: fit-content;        /*ADDED*/                    
  margin: 0 auto;            /*ADDED*/                    
  /* margin-top: 15%;        //REMOVED*/
  margin-top: 150px;         /*ADDED*/   
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 HTML页面中的DIV定位 - DIv positioning in html page CSS / HTML Div调整大小和表位置 - CSS/HTML Div Resizing and Table positioning html div定位 - html div positioning Blogger HTML div定位 - Blogger html div positioning HTML DIV按钮定位 - HTML DIV Button Positioning 将div定位在页面底部 - Positioning div at the bottom of the page 将div定位在页面底部 - Positioning div at the bottom of the page HTML div定位关闭 - HTML div positioning off HTML / CSS Div定位 - HTML/CSS Div Positioning HTML页脚/ Div定位 - HTML footer/Div positioning
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM