內容在css中超過主要內容的流量-頁面布局問題 -有解無憂

我面臨著一個問題，內容溢位了頁面

。

我已經嘗試在with: 100%到body, main div，但是內容仍然會溢位，我可以在mobile視圖中看到這個問題，我想同樣的問題也可能發生在Desktop視圖中，目前它在Desktop上作業正常

。

我正在創建一個頁面，我在其中添加了form，該表單從頁面中消失了

。

誰能告訴我為什么會這樣？
我還試著為頁面的布局添加了border-box屬性的css，但還是溢位了頁面

添加圖片供參考。

代碼片段

。

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: 'segoe ui'。
}

.wrapper {
  max-width: 100%;
}

img {
  width: 100%;
}

.myAccount-wrapper {
  width: 90%;
  margin: 0 auto;
  .myAccount-section {
    display: flex;
    flex-wrap: wrap;
    .account-img {
      img {
        width: auto;
        @media (min-width: 544px) and （max-width: 991px) {
          width: 100%;
        }
      }
    }

    .account-img,
    .account-form {
      flex-grow: 1;
    }
  }
}

//我的賬戶 section
.profile-details {
  display: flex;
}

// form 風格設計
input:focus ~ .floating-label,
input:not(:focus):valid ~.floating-label{
  top: 0px;
  bottom: 0px;
  left: 0px;
  字體大小。11px;
  opacity: 1;
  padding: 0px 0 0 15px。
}

.profile-name {
  position: relative;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 0px;
  top: 0px;
  transition: 0.2s ease all;
  padding: 5px;
}

 <body>/span>
   <div id="root"> 
      <div class="wrapper"> 
         <main class="main-component"/span>>
            <div class="myAccount-wrapper"/span>>
               <div class="myAccount-section"/span>>
                  <div class=" account-img"> <img src="https: //encrypted-tbn0. gstatic. com/images? q=tbn: ANd9GcScppAjzrG06w7v07vGUeT7E35MSS6Zfry2pEBrCYAxGRjtC7dNHz8JdB5rfJCh5FKaCjY& amp; usqp=CAU" alt="Profile"></div>>
                  <div class="account-form">/span>
                     <form>/span>
                        <div class="account-header"> 
                           <h3 class=""> 我的賬戶</h3>
                        </div>/span>
                        <div class="profile-name">/span>< input type="text" class="inputText" required="> <span class="浮動標簽">。 名稱</span></div> 
                        <div class="file-details">
                           <div class="profile-name">/span>< input type="text" class="inputText" required="> <span class="浮動標簽"> Mobile</span></div> 
                           <div class="profile-name"> < input type="text" class="inputText" required="> <span class="浮動標簽"> Email</span></div> 
                        </div>/span>
                     </form> 
                  </div>/span>
               </div>/span>
            </div>/span>
         </main> 
      </div> 
   </div>/span>
</body>/span>

uj5u.com熱心網友回復：

不是你想要的，但你可以做的。

一個簡單的基本表格，你可以用它來代替你正在使用的rn.

。

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

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.form-container {
  position: relative;
  width: 450px;
  display: flex;
  align-items: center;
  padding-bottom: 2rem;
  flex-direction: column;
}

.form-container svg {
  width: 240px;
  height: 240px。
  填充。#0071e3;
}

.form-container form {
  width: 100%;
  display: flex;
  padding: 0 2rem;
  flex-direction: column;
}

.form-container h3,
.form-container input {
  font-family: Inter, sans-serif, system-ui;
}

.form-container h3 {
  字體大小。2rem;
  text-align: center;
}

.form-container input {
  字體大小。1rem;
  padding: 0.75rem;
  border: 1px solid #c1c1;
}

.form-container input:not（:first-child） {
  margin-top: 1rem;
}

< link rel="preconnect" href="https: //fonts. googleapis.com" />
<link rel="preconnect"/span> href="https://fonts. gstatic.com" crossorigin />。
<link href="https://fonts.googleapis. com/css2?family=Inter:wght@400;700&display=swap" rel="styleheet"/>

<div class="form-container"> 
  < svg width="24" 高度="24" viewBox="0 0 24 24"> 
        <path d="M12 2C6.579 2 2 6. 579 2 12s4.579 10 10 10-4.579 10-10S17.421 2 12 2zm0 5c1.727 0 3 1.272 3 3s-1.273 3-3 3c-1.726 0-3-1.272-3 3s1.274-3 3-3zm-5.106 9.772c.897-1 .32 2.393-2.2 4.106-2.2H2C1.714 0 3.209.88 4.106 2.2C15.828 18.14 14.015 19 12 19S-3.828-.86-5.106-2.228Z"/span>>/span></path>/span>
    </svg> 
  <form class="basic-form"> 
    <h3>我的賬戶</h3>/span>
    < input type="text" placeholder="Name" />
    < input type="text" placeholder="Mobile" /> 
    < input type="email" placeholder="email">
  </form>/span>
</div>/span>

uj5u.com熱心網友回復：

我復制上面的代碼是這樣的：

<html> <head> <title>TODO提供一個標題</title> <meta charset="UTF-8">/span> <style> * { box-sizing: border-box; } body { margin: 0px; font-family: "segoe ui"。 } .wrapper { max-width: 100%; } img { width: 100%; } .myAccount-wrapper { width: 90%; margin: 0 auto; } .myAccount-wrapper .myAccount-section { display: flex; flex-wrap: wrap; } .myAccount-wrapper .myAccount-section . account-img img { width: auto; } @media (min-width: 544px) and （max-width: 991px) { .myAccount-wrapper .myAccount-section . account-img img { width: 100%; } } .myAccount-wrapper .myAccount-section . account-img, .myAccount-wrapper .myAccount-section . account-form { flex-grow: 1; } .profile-details { display: flex; } input:focus ~ .floating-label, input:not(:focus):valid ~.floating-label{ top: 0px; bottom: 0px; left: 0px; 字體大小。11px; opacity: 1; padding: 0px 0 0 15px。 } .profile-name { position: relative; } .inputText { font-size: 14px; width: 200px; height: 35px; } .floating-label { position: absolute; pointer-events: none; left: 0px; top: 0px; transition: 0.2s ease all; padding: 5px; } </style>> </head> <body> <div id="root"> <div class="wrapper"> <main class="main-component"/span>> <div class="myAccount-wrapper"/span>> <div class="myAccount-section"/span>> <div class=" account-img"> <img src="https: //encrypted-tbn0. gstatic. com/images? q=tbn: ANd9GcScppAjzrG06w7v07vGUeT7E35MSS6Zfry2pEBrCYAxGRjtC7dNHz8JdB5rfJCh5FKaCjY& amp; usqp=CAU" alt="Profile"></div>> <div class="account-form">/span> <form>/span> <div class="account-header"> <h3 class=""> 我的賬戶</h3> </div>/span> <div class="profile-name">/span>< input type="text" class="inputText" required="> <span class="浮動標簽">。名稱</span></div> <div class="file-details"> <div class="profile-name">/span>< input type="text" class="inputText" required="> <span class="浮動標簽"> Mobile</span></div> <div class="profile-name"> < input type="text" class="inputText" required="> <span class="浮動標簽"> Email</span></div> </div>/span> </form> </div>/span> </div>/span> </div>/span> </main> </div> </div>/span> </body>

我認為你可以對.profile-details使用flex-wrap: wrap;

uj5u.com熱心網友回復：

我只在你的CSS/SCSS檔案中添加了這樣的代碼：

@media (max-width: 422px) {
    .profile-details {
        flex-direction: column;
    }
 }

而且在422px的解析度下作業正常。你可以根據你的需要設定任何其他最大寬度。我也去掉了.inputText的寬度，因為沒有它也能作業。以下是我的全部CSS代碼：

。

* {
    box-sizing: border-box;
  }
  body {
    margin: 0px;
    font-family: 'segoe ui'。
  }
  .wrapper {
    max-width: 100%;
  }
  img {
    width: 100%;
  }
  .myAccount-wrapper {
    width: 90%;
    margin: 0 auto;
  }
  .myAccount-wrapper .myAccount-section {
    display: flex;
    flex-wrap: wrap;
  }
  .myAccount-wrapper .myAccount-section . account-img img {
    width: auto;
  }
  @media (min-width: 544px) and （max-width: 991px) {
    .myAccount-wrapper .myAccount-section . account-img img {
      width: 100%;
    }
  }
  .myAccount-wrapper .myAccount-section 。 account-img, .myAccount-wrapper .myAccount-sesection .account-form{
    flex-grow: 1;
  }
  .profile-details {
    display: flex;
  }
  input:focus ~ 。 floating-label, input:not(:focus):valid ~. 浮動標簽 {
    top: 0px;
    bottom: 0px;
    left: 0px;
    字體大小。11px;
    opacity: 1;
    padding: 0px 0 0 15px。
  }
  .profile-name {
    position: relative;
  }
  .inputText {
    font-size: 14px;
    /* 寬度: 200px; */
    height: 35px;
  }
  .floating-label {
    position: absolute;
    pointer-events: none;
    left: 0px;
    top: 0px;
    transition: 0.2s ease all;
    padding: 5px;
  }

  @media （max-width: 422px) {
    .profile-details {
        flex-direction: column;
    }
  }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/331829.html

標籤：

上一篇：焦點在div內的span上的Javascript焦點

下一篇：如何在許多迭代的動態元素中只改變被點擊的元素的顏色