我目前正在处理网格元素溢出父容器的问题。我不知道如何纠正这个问题。如果我调整视口(viewport)的大小,表单字段会溢出父容器,这并不理想。如果有人可以提供一些帮助,那就太好了。非常感谢!
代码笔链接 - https://codepen.io/philmein23/pen/oybrVX
这是下面列出的 HTML 结构:
<div class="framed-layout-part modern container padded-container">
<header>
<h1>Create Contact Information</h1>
</header>
<section class="indent">
<form class="person-edit-form-grid">
<div>
<div>
<label for="primary-email">Primary Email Address</label>
<input id="primary-email" type="text" value.bind="state.person.primaryEmail.address" readonly/>
</div>
<div>
<label for="secondary-email">Secondary Email Address</label>
<input id="secondary-email" type="text" value.bind="state.person.secondaryEmail.address"/>
</div>
</div>
<div class="basic-info">
<div class="basic-info-grid">
<label for="salutation">Salutation</label>
<select id="salutation" value.bind="state.person.prefix">
<option model.bind="null">Choose Salutation</option>
<option repeat.for="prefixValue of state.person.prefixValues" model.bind="prefixValue">
${prefixValue.value}
</option>
</select>
</div>
<div class="basic-info-grid">
<label for="first-name">First Name</label>
<input id="" type="text" value.bind="state.person.firstName"/>
</div>
<div class="basic-info-grid">
<label for="middle-initial">Middle Name</label>
<input id="middle-initial" type="text" value.bind="state.person.middleName"/>
</div>
<div class="basic-info-grid">
<label for="last-name">Last Name</label>
<input id="last-name" type="text" value.bind="state.person.lastName"/>
</div>
<div class="basic-info-grid">
<label for="title">Title</label>
<input id="title" type="text" value.bind="state.person.title"/>
</div>
</div>
<div class="phone-info">
<h2>Phone</h2>
<div class="phone-info-grid">
<label id="work-phone">Work</label>
<div>
<span>+</span>
<input class="country-code-width" type="text" value.bind="state.person.businessPhone.countryCode" />
</div>
<div>
<input aria-labelledby="work-phone" placeholder="Phone Number" type="text" value.bind="state.person.businessPhone.number"/>
</div>
<div>
<input style="width: 80px" placeholder="Extension" aria-labelledby="work-phone" type="text" value.bind="state.person.businessPhone.extension"/>
</div>
</div>
<div class="phone-info-grid">
<label id="mobile-phone">Mobile</label>
<div>
<span>+</span>
<input class="country-code-width" type="text" value.bind="state.person.mobilePhone.countryCode" />
</div>
<div>
<input id="" type="text" placeholder="Phone Number" value.bind="state.person.mobilePhone.number"/>
</div>
</div>
<div class="phone-info-grid">
<label id="fax-number">Fax</label>
<div>
<span>+</span>
<input class="country-code-width" type="text" value.bind="state.person.faxPhone.countryCode" />
</div>
<div>
<input aria-labelledby="fax-number" type="text" placeholder="Phone Number" value.bind="state.person.faxPhone.number"/>
</div>
</div>
</div>
</form>
</section>
</div>
这是下面列出的CSS代码:
body {
background: lightgrey;
}
h1, h2 {
margin-bottom: 5px;
}
.framed-layout-part {
border: none;
-webkit-box-shadow: 2px 2px 3px 0 #ccc;
-moz-box-shadow: 2px 2px 3px 0 #ccc;
box-shadow: 2px 2px 3px 0 #ccc;
position: relative;
border-radius: 3px;
border: none;
box-sizing: border-box;
background-color: #fff;
margin: 7px;
}
.indent {
margin-left: 15px;
}
.country-code-width {
width: 20px !important;
}
.container {
width: 30vw;
margin: 30px auto;
}
.button-container {
margin-top: 10px;
display: flex;
justify-content: flex-end;
}
#primary-email {
border: none;
background: lightgray;
}
@supports not (display: grid) {
.person-edit-form-grid {
display: flex;
flex-direction: column;
}
.basic-info {
margin: 15px 0;
}
.phone-info {
width: 30vw;
}
.phone-info-grid {
display: flex;
}
label {
flex-basis: 80px;
}
.phone-info-grid > div {
margin: 0 5px 5px 0;
}
}
@supports (display: grid) {
.person-edit-form-grid {
display: grid;
grid-row-gap: 20px;
padding: 10px 0;
}
.basic-info {
display: grid;
grid-row-gap: 10px;
}
.basic-info-grid {
display: grid;
grid-template-columns: 100px max-content;
}
.phone-info {
display: grid;
grid-gap: 10px;
}
.phone-info-grid {
display: grid;
grid-template-columns: 100px repeat(3, max-content);
grid-column-gap: 10px;
}
}
最佳答案
您可以使用媒体查询来减少较小视口(viewport)中的列数和列宽。例如:
@media screen and (max-width: 1350px){
.phone-info-grid {
grid-template-columns: 50px repeat(2, max-content);
}
}
@media screen and (max-width: 900px){
.phone-info-grid {
grid-template-columns: 50px repeat(1, max-content);
}
}
关于html - 使用 CSS Grid 网格元素溢出父容器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50685033/