div 使内容溢出，此滚动条可用。如何正确尺寸？
div makes content overflow and this scroll horizantal is available. How to correctly size?
我正在制作个人资料页面，制作完成后我遇到了水平滚动的问题。我知道这是某种溢出的结果。我一直在寻找一些时间，最接近我得到的解决方案是给 .profilePg 一个更小的宽度，但这随后破坏了 UI 布局。
我可以更改什么来防止这种溢出从而防止水平滚动？
这里是 https://jsfiddle.net/ 代码。
.profilePg {
background-color: grey;
margin-left: 222px;
/* width: 85%; */
height: 100%;
text-align: center;
/* margin-left: auto; */
}
.topProfDiv {
/* background-color: lightblue; */
text-align: left;
/* margin-top: 30px; */
/* margin-right: auto;
margin-left: auto; */
/* text-align: center; */
background-color: #2E2E2E;
/* border-radius: 27px; */
/* display: inline-block; */
width: 100%;
height: 400px;
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid black;
/* vertical-align: top; */
/* display: inline-grid; */
}
/* .leftProfileDiv, .bannerDiv { */
/* background-color: black; */
/* display: inline-block; */
/* margin-top: 11px; */
/* height: 90%; */
/* } */
.leftProfileDiv {
/* display: inline-block; */
/* background-color: darkblue; */
/* margin-top: 25px; */
margin-left: 30px;
/* vertical-align: top; */
width: 100%;
height: 40%;
/* text-align: center; */
}
.leftProfileDiv p {
display: inline-block;
/* margin-top: 50px; */
margin-left: 25px;
/* margin-top: 40px; */
color: grey;
cursor: pointer;
}
.leftProfileDiv h2 {
/* background: grey; */
/* width: 90%; */
font-size: 18px;
margin: 0px;
margin-top: 50px;
margin-left: 25px;
display: inline-block;
vertical-align: middle;
}
/* .leftProfileDiv h3 {
margin: 0px;
margin-top: 50px;
display: inline-block;
} */
/* .leftProfileDiv h4 {
display: inline-block;
} */
.profileInfoDiv {
display: inline-block;
width: 50%;
height: 100%;
/* background: lightblue; */
/* margin: 0px; */
vertical-align: middle;
}
.profileInfoDiv h4 {
margin-left: 25px;
}
/* #profStats {
color: #A0A0A0;
font: Arial;
font-family: sans-serif;
font-size: 18;
}
#numberSubs {
color: #A0A0A0;
font: Arial;
font-family: sans-serif;
font-weight: 600;
} */
#profileStats {
margin-left: 10px;
color: #A0A0A0;
font-size: 14px;
}
#profileCaption {
font-size: 15px;
font-weight: 500;
color: #CCCCCC;
/* white */
}
#seperator {
font-size: 25px;
/* color: #CCCCCC; */
}
/* #numberSubs {
color: white;
font-weight: 600;
} */
#profileSubscribeBtn {
color: white;
font-size: 17px;
font-weight: 600;
width: 200px;
height: 55px;
background-color: #4549F1;
border-radius: 30px;
border: none;
cursor: pointer;
/* margin-left: 25%; */
/* 68px; */
/* margin-right: 10px; */
position: absolute; /*or fixed*/
right: 30px;
margin-top: 50px;
}
/* #profileSubscribeBtn:active {
background-color: #4549F1;
} */
.leftProfileDiv img {
display: inline-block;
vertical-align: middle;
/* margin-top: 50px; */
width: 100px;
height: 100px;
border: 1.5px solid transparent;
border-radius: 50px;
}
/* .leftProfileDiv img:hover {
border: solid #4152F1 1.5px;
} */
/* .profileContentDiv {
width: 100%;
} */
#profileUsername {
cursor: default;
color: white;
}
.bannerDiv {
/* margin-top: 12px; */
/* margin-left: 15px; */
width: 100%;
height: 60%;
/* border-radius: 17px; */
cursor: default;
}
.banner {
/* background-color: blue; */
background-image: url('../images/profileImage.png');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
/* border-radius: 17px; */
}
<div class="topProfDiv">
<div class="bannerDiv">
<!-- <img src="images/testImg.png"> -->
<div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
</div>
<div class="leftProfileDiv">
<img id="profImage" src="images/defaultProfImg.png">
<div class="profileInfoDiv">
<h2 id="profileUsername">username</h2>
<h2 id="profileStats">200 Subscribers</h2>
<!-- <h2 id="profileStats"><a id="seperator">|</a> 200 Subscribers</h2> -->
<h4 id="profileCaption">This user is yet to add a bio...</h4>
<!-- <p id="signout">Sign out</p> -->
</div>
<button id="profileSubscribeBtn">Subscribe</button>
<!-- <p id="signout">Sign out</p> -->
</div>
<!-- <div class="bannerDiv">
<div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
</div> -->
</div>
像 calc 一样应用宽度，因为你在 .leftProfileDiv
上应用 margin-left
.leftProfileDiv {
/* display: inline-block; */
/* background-color: darkblue; */
/* margin-top: 25px; */
margin-left: 30px;
/* vertical-align: top; */
width: calc(100% - 30px);
height: 40%;
/* text-align: center; */
}
.profilePg {
background-color: grey;
margin-left: 222px;
/* width: 85%; */
height: 100%;
text-align: center;
/* margin-left: auto; */
}
.topProfDiv {
/* background-color: lightblue; */
text-align: left;
/* margin-top: 30px; */
/* margin-right: auto;
margin-left: auto; */
/* text-align: center; */
background-color: #2E2E2E;
/* border-radius: 27px; */
/* display: inline-block; */
width: 100%;
height: 400px;
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid black;
/* vertical-align: top; */
/* display: inline-grid; */
}
/* .leftProfileDiv, .bannerDiv { */
/* background-color: black; */
/* display: inline-block; */
/* margin-top: 11px; */
/* height: 90%; */
/* } */
.leftProfileDiv {
/* display: inline-block; */
/* background-color: darkblue; */
/* margin-top: 25px; */
margin-left: 30px;
/* vertical-align: top; */
width: calc(100% - 30px);
height: 40%;
/* text-align: center; */
}
.leftProfileDiv p {
display: inline-block;
/* margin-top: 50px; */
margin-left: 25px;
/* margin-top: 40px; */
color: grey;
cursor: pointer;
}
.leftProfileDiv h2 {
/* background: grey; */
/* width: 90%; */
font-size: 18px;
margin: 0px;
margin-top: 50px;
margin-left: 25px;
display: inline-block;
vertical-align: middle;
}
/* .leftProfileDiv h3 {
margin: 0px;
margin-top: 50px;
display: inline-block;
} */
/* .leftProfileDiv h4 {
display: inline-block;
} */
.profileInfoDiv {
display: inline-block;
width: 50%;
height: 100%;
/* background: lightblue; */
/* margin: 0px; */
vertical-align: middle;
}
.profileInfoDiv h4 {
margin-left: 25px;
}
/* #profStats {
color: #A0A0A0;
font: Arial;
font-family: sans-serif;
font-size: 18;
}
#numberSubs {
color: #A0A0A0;
font: Arial;
font-family: sans-serif;
font-weight: 600;
} */
#profileStats {
margin-left: 10px;
color: #A0A0A0;
font-size: 14px;
}
#profileCaption {
font-size: 15px;
font-weight: 500;
color: #CCCCCC;
/* white */
}
#seperator {
font-size: 25px;
/* color: #CCCCCC; */
}
/* #numberSubs {
color: white;
font-weight: 600;
} */
#profileSubscribeBtn {
color: white;
font-size: 17px;
font-weight: 600;
width: 200px;
height: 55px;
background-color: #4549F1;
border-radius: 30px;
border: none;
cursor: pointer;
/* margin-left: 25%; */
/* 68px; */
/* margin-right: 10px; */
position: absolute; /*or fixed*/
right: 30px;
margin-top: 50px;
}
/* #profileSubscribeBtn:active {
background-color: #4549F1;
} */
.leftProfileDiv img {
display: inline-block;
vertical-align: middle;
/* margin-top: 50px; */
width: 100px;
height: 100px;
border: 1.5px solid transparent;
border-radius: 50px;
}
/* .leftProfileDiv img:hover {
border: solid #4152F1 1.5px;
} */
/* .profileContentDiv {
width: 100%;
} */
#profileUsername {
cursor: default;
color: white;
}
.bannerDiv {
/* margin-top: 12px; */
/* margin-left: 15px; */
width: 100%;
height: 60%;
/* border-radius: 17px; */
cursor: default;
}
.banner {
/* background-color: blue; */
background-image: url('../images/profileImage.png');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
/* border-radius: 17px; */
}
<div class="topProfDiv">
<div class="bannerDiv">
<!-- <img src="images/testImg.png"> -->
<div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
</div>
<div class="leftProfileDiv">
<img id="profImage" src="images/defaultProfImg.png">
<div class="profileInfoDiv">
<h2 id="profileUsername">username</h2>
<h2 id="profileStats">200 Subscribers</h2>
<!-- <h2 id="profileStats"><a id="seperator">|</a> 200 Subscribers</h2> -->
<h4 id="profileCaption">This user is yet to add a bio...</h4>
<!-- <p id="signout">Sign out</p> -->
</div>
<button id="profileSubscribeBtn">Subscribe</button>
<!-- <p id="signout">Sign out</p> -->
</div>
<!-- <div class="bannerDiv">
<div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
</div> -->
</div>
我正在制作个人资料页面，制作完成后我遇到了水平滚动的问题。我知道这是某种溢出的结果。我一直在寻找一些时间，最接近我得到的解决方案是给 .profilePg 一个更小的宽度，但这随后破坏了 UI 布局。
我可以更改什么来防止这种溢出从而防止水平滚动？
这里是 https://jsfiddle.net/ 代码。
.profilePg {
background-color: grey;
margin-left: 222px;
/* width: 85%; */
height: 100%;
text-align: center;
/* margin-left: auto; */
}
.topProfDiv {
/* background-color: lightblue; */
text-align: left;
/* margin-top: 30px; */
/* margin-right: auto;
margin-left: auto; */
/* text-align: center; */
background-color: #2E2E2E;
/* border-radius: 27px; */
/* display: inline-block; */
width: 100%;
height: 400px;
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid black;
/* vertical-align: top; */
/* display: inline-grid; */
}
/* .leftProfileDiv, .bannerDiv { */
/* background-color: black; */
/* display: inline-block; */
/* margin-top: 11px; */
/* height: 90%; */
/* } */
.leftProfileDiv {
/* display: inline-block; */
/* background-color: darkblue; */
/* margin-top: 25px; */
margin-left: 30px;
/* vertical-align: top; */
width: 100%;
height: 40%;
/* text-align: center; */
}
.leftProfileDiv p {
display: inline-block;
/* margin-top: 50px; */
margin-left: 25px;
/* margin-top: 40px; */
color: grey;
cursor: pointer;
}
.leftProfileDiv h2 {
/* background: grey; */
/* width: 90%; */
font-size: 18px;
margin: 0px;
margin-top: 50px;
margin-left: 25px;
display: inline-block;
vertical-align: middle;
}
/* .leftProfileDiv h3 {
margin: 0px;
margin-top: 50px;
display: inline-block;
} */
/* .leftProfileDiv h4 {
display: inline-block;
} */
.profileInfoDiv {
display: inline-block;
width: 50%;
height: 100%;
/* background: lightblue; */
/* margin: 0px; */
vertical-align: middle;
}
.profileInfoDiv h4 {
margin-left: 25px;
}
/* #profStats {
color: #A0A0A0;
font: Arial;
font-family: sans-serif;
font-size: 18;
}
#numberSubs {
color: #A0A0A0;
font: Arial;
font-family: sans-serif;
font-weight: 600;
} */
#profileStats {
margin-left: 10px;
color: #A0A0A0;
font-size: 14px;
}
#profileCaption {
font-size: 15px;
font-weight: 500;
color: #CCCCCC;
/* white */
}
#seperator {
font-size: 25px;
/* color: #CCCCCC; */
}
/* #numberSubs {
color: white;
font-weight: 600;
} */
#profileSubscribeBtn {
color: white;
font-size: 17px;
font-weight: 600;
width: 200px;
height: 55px;
background-color: #4549F1;
border-radius: 30px;
border: none;
cursor: pointer;
/* margin-left: 25%; */
/* 68px; */
/* margin-right: 10px; */
position: absolute; /*or fixed*/
right: 30px;
margin-top: 50px;
}
/* #profileSubscribeBtn:active {
background-color: #4549F1;
} */
.leftProfileDiv img {
display: inline-block;
vertical-align: middle;
/* margin-top: 50px; */
width: 100px;
height: 100px;
border: 1.5px solid transparent;
border-radius: 50px;
}
/* .leftProfileDiv img:hover {
border: solid #4152F1 1.5px;
} */
/* .profileContentDiv {
width: 100%;
} */
#profileUsername {
cursor: default;
color: white;
}
.bannerDiv {
/* margin-top: 12px; */
/* margin-left: 15px; */
width: 100%;
height: 60%;
/* border-radius: 17px; */
cursor: default;
}
.banner {
/* background-color: blue; */
background-image: url('../images/profileImage.png');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
/* border-radius: 17px; */
}
<div class="topProfDiv">
<div class="bannerDiv">
<!-- <img src="images/testImg.png"> -->
<div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
</div>
<div class="leftProfileDiv">
<img id="profImage" src="images/defaultProfImg.png">
<div class="profileInfoDiv">
<h2 id="profileUsername">username</h2>
<h2 id="profileStats">200 Subscribers</h2>
<!-- <h2 id="profileStats"><a id="seperator">|</a> 200 Subscribers</h2> -->
<h4 id="profileCaption">This user is yet to add a bio...</h4>
<!-- <p id="signout">Sign out</p> -->
</div>
<button id="profileSubscribeBtn">Subscribe</button>
<!-- <p id="signout">Sign out</p> -->
</div>
<!-- <div class="bannerDiv">
<div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
</div> -->
</div>
像 calc 一样应用宽度，因为你在 .leftProfileDiv
margin-left
.leftProfileDiv {
/* display: inline-block; */
/* background-color: darkblue; */
/* margin-top: 25px; */
margin-left: 30px;
/* vertical-align: top; */
width: calc(100% - 30px);
height: 40%;
/* text-align: center; */
}
.profilePg {
background-color: grey;
margin-left: 222px;
/* width: 85%; */
height: 100%;
text-align: center;
/* margin-left: auto; */
}
.topProfDiv {
/* background-color: lightblue; */
text-align: left;
/* margin-top: 30px; */
/* margin-right: auto;
margin-left: auto; */
/* text-align: center; */
background-color: #2E2E2E;
/* border-radius: 27px; */
/* display: inline-block; */
width: 100%;
height: 400px;
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid black;
/* vertical-align: top; */
/* display: inline-grid; */
}
/* .leftProfileDiv, .bannerDiv { */
/* background-color: black; */
/* display: inline-block; */
/* margin-top: 11px; */
/* height: 90%; */
/* } */
.leftProfileDiv {
/* display: inline-block; */
/* background-color: darkblue; */
/* margin-top: 25px; */
margin-left: 30px;
/* vertical-align: top; */
width: calc(100% - 30px);
height: 40%;
/* text-align: center; */
}
.leftProfileDiv p {
display: inline-block;
/* margin-top: 50px; */
margin-left: 25px;
/* margin-top: 40px; */
color: grey;
cursor: pointer;
}
.leftProfileDiv h2 {
/* background: grey; */
/* width: 90%; */
font-size: 18px;
margin: 0px;
margin-top: 50px;
margin-left: 25px;
display: inline-block;
vertical-align: middle;
}
/* .leftProfileDiv h3 {
margin: 0px;
margin-top: 50px;
display: inline-block;
} */
/* .leftProfileDiv h4 {
display: inline-block;
} */
.profileInfoDiv {
display: inline-block;
width: 50%;
height: 100%;
/* background: lightblue; */
/* margin: 0px; */
vertical-align: middle;
}
.profileInfoDiv h4 {
margin-left: 25px;
}
/* #profStats {
color: #A0A0A0;
font: Arial;
font-family: sans-serif;
font-size: 18;
}
#numberSubs {
color: #A0A0A0;
font: Arial;
font-family: sans-serif;
font-weight: 600;
} */
#profileStats {
margin-left: 10px;
color: #A0A0A0;
font-size: 14px;
}
#profileCaption {
font-size: 15px;
font-weight: 500;
color: #CCCCCC;
/* white */
}
#seperator {
font-size: 25px;
/* color: #CCCCCC; */
}
/* #numberSubs {
color: white;
font-weight: 600;
} */
#profileSubscribeBtn {
color: white;
font-size: 17px;
font-weight: 600;
width: 200px;
height: 55px;
background-color: #4549F1;
border-radius: 30px;
border: none;
cursor: pointer;
/* margin-left: 25%; */
/* 68px; */
/* margin-right: 10px; */
position: absolute; /*or fixed*/
right: 30px;
margin-top: 50px;
}
/* #profileSubscribeBtn:active {
background-color: #4549F1;
} */
.leftProfileDiv img {
display: inline-block;
vertical-align: middle;
/* margin-top: 50px; */
width: 100px;
height: 100px;
border: 1.5px solid transparent;
border-radius: 50px;
}
/* .leftProfileDiv img:hover {
border: solid #4152F1 1.5px;
} */
/* .profileContentDiv {
width: 100%;
} */
#profileUsername {
cursor: default;
color: white;
}
.bannerDiv {
/* margin-top: 12px; */
/* margin-left: 15px; */
width: 100%;
height: 60%;
/* border-radius: 17px; */
cursor: default;
}
.banner {
/* background-color: blue; */
background-image: url('../images/profileImage.png');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
/* border-radius: 17px; */
}
<div class="topProfDiv">
<div class="bannerDiv">
<!-- <img src="images/testImg.png"> -->
<div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
</div>
<div class="leftProfileDiv">
<img id="profImage" src="images/defaultProfImg.png">
<div class="profileInfoDiv">
<h2 id="profileUsername">username</h2>
<h2 id="profileStats">200 Subscribers</h2>
<!-- <h2 id="profileStats"><a id="seperator">|</a> 200 Subscribers</h2> -->
<h4 id="profileCaption">This user is yet to add a bio...</h4>
<!-- <p id="signout">Sign out</p> -->
</div>
<button id="profileSubscribeBtn">Subscribe</button>
<!-- <p id="signout">Sign out</p> -->
</div>
<!-- <div class="bannerDiv">
<div onclick='pickFile()' id="banner" class="banner"><input style='display: none;' type="file" id="fileButton" value="upload"/></div>
</div> -->
</div>