div делает переполнение контента, и этот горизонт прокрутки доступен. Как правильно размер? - PullRequest
Новая
       1

div делает переполнение контента, и этот горизонт прокрутки доступен. Как правильно размер?

0 голосов
/ 11 февраля 2020

Я создаю страницу профиля, и после ее создания у меня возникает проблема, связанная с горизонтальной прокруткой. Я понимаю, что это результат какого-то переполнения. Я искал какое-то время, и самое близкое к решению, которое я получил, это придание .profilePg меньшей ширины, но это разрушило макет пользовательского интерфейса.

Что можно изменить, чтобы предотвратить это переполнение и, таким образом, предотвратить горизонтальную прокрутку?

Вот код 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>

1 Ответ

0 голосов
/ 11 февраля 2020

применять ширину с calc как, потому что вы применяете margin-left на .leftProfileDiv

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...