内容从正文中溢出

普里亚

我面临的问题是 content overflow out of the page

我已经尝试将 加入with: 100%body, maindiv 中,但内容仍然存在overflowing,我可以在mobile视图中看到该问题,我想同样的问题也可能发生在Desktop视图中,目前它在桌面上运行良好。

我创建了一个页面,在其中添加了一个,form并且该表单从body.

我还尝试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;
    }
  }
}

// my account section
.profile-details {
  display: flex;
}

// form styling
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
  top: 0px;
  bottom: 0px;
  left: 0px;
  font-size: 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>
   <div id="root">
      <div class="wrapper">
         <main class="main-component">
            <div class="myAccount-wrapper">
               <div class="myAccount-section">
                  <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">
                     <form>
                        <div class="account-header">
                           <h3 class="">MY ACCOUNT</h3>
                        </div>
                        <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Name</span></div>
                        <div class="profile-details">
                           <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Mobile</span></div>
                           <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Email</span></div>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </main>
      </div>
   </div>
</body>

安德烈

我像这样重现上面的代码:

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
   
    <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;
  font-size: 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">
            <div class="myAccount-wrapper">
               <div class="myAccount-section">
                  <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">
                     <form>
                        <div class="account-header">
                           <h3 class="">MY ACCOUNT</h3>
                        </div>
                        <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Name</span></div>
                        <div class="profile-details">
                           <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Mobile</span></div>
                           <div class="profile-name"><input type="text" class="inputText" required=""><span class="floating-label">Email</span></div>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </main>
      </div>
   </div>
</body>

我认为你可以使用 flex-wrap: wrap; 对于 .profile-details。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用python获取网页正文中的内容

在邮件正文中显示文件的内容

如何从正文中获取<img src =>的内容

Uuencode在电子邮件正文中显示附件内容

PHP邮件在正文中显示内容类型标头

请求正文中的Facebook Messenger API内容不完整

JavaScript表单未将任何内容发布到正文中

设置溢出后,鼠标滚轮在 MS 边缘不起作用:html 正文中的自动

替换正文中的单词

正文中的HTML代码

为什么我的脚本不能始终检测电子邮件正文中的内容?

赛普拉斯将响应正文中的内容另存为别名或变量

如何在帖子正文中将文件内容上传到网站

引导对话框根据 ajax 调用在正文中显示 HTML 内容

如何使用PHP或JavaScript在网页的正文中显示描述元标记的内容?

POSTMAN 在 POST 请求中没有在正文中发送任何内容

如何将正文中的文本内容复制到剪贴板

使用Python和smtplib在电子邮件正文中显示列表的内容

将列表内容或for循环附加到电子邮件正文中

如何在电子邮件正文中获取 jenkins 的控制台日志内容?

在CSS中围绕网站正文中的Flash内容创建左右间隔符

如何将组合框的内容插入到 Word 文档的正文中?

如何仅在 div 内容而不是整个正文中制作滚动条?

在正文中获取原始请求以及正文

请求正文中的动态文件

邮件正文中的Mailto链接

JSON正文中的变量访问

正文中的AFNetworking GET参数

替换MailItem正文中的文本