我面临的问题是 content overflow out of the page
我已经尝试将 加入with: 100%
到body, main
div 中,但内容仍然存在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&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&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] 删除。
我来说两句