關注卡 html css

Question

我制作了這個追隨者卡片設計但是在設計它時遇到了一些問題，當我嘗試添加margin-right以將圖像對齊到容器的右側時由於某種原因它沒有對齊到右邊，它對齊它更靠左，它會拉伸容器，它還會抓取文本，即使它們都在單獨的容器中，按鈕也是如此。 出於某種原因，我沒有在follow__content上使用填充，而是使用了寬度，但由於某種原因，圖像被排除在外。

 * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.2%; font-family: Roboto, Arial, Helvetica, sans-serif; }.follow__container { display: grid; place-items: center; height: 100vh; }.follow__content { background-color: rgba(206, 194, 178, 0.836); line-height: 1.2; padding: 2rem 10rem; }.img__container { width: 35px; display: inline-block; margin-right: 2rem; margin-top: 0.5rem; }.img__container img { width: 35px; height: 35px; object-fit: cover; object-position: center; border-radius: 5rem; }.follow__desc { display: inline-block; margin: 0 0 0 0.5rem; font-size: 0.99rem; }.follow__btn { display: inline-block; font-size: 1.2rem; left: 8rem; position: relative; top: -1.6rem; cursor: pointer; }.follow__btn a { text-decoration: none; padding: 1rem 1.5rem; background-color: #222095; color: #ffffff; border-radius: 1rem; }

 <div class="follow__container"> <div class="follow__content"> <div class="img__container"> <img src="cybercybrog.jpg" alt=""> </div> <div class="follow__desc"> <h2>Mr Cyborg</h2> <p>#CyberCity</p> <p>Most Popular</p> </div> <div class="follow__btn"> <a href="#">Follow</a> </div> </div> </div>

Answer 1

我認為這是您想要的 output。我在follow__content class 中使用了padding property ，並通過像這樣給所有邊填充來更改它的值。 由於您只為兩側提供了填充，因此應用不正確。

.follow__content {
  background-color: rgba(206, 194, 178, 0.836);
  line-height: 1.2;
  padding: 10px 100px 10px 10px;  
}

 * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.2%; font-family: Roboto, Arial, Helvetica, sans-serif; }.follow__container { display: grid; place-items: center; height: 100vh; }.follow__content { background-color: rgba(206, 194, 178, 0.836); line-height: 1.2; padding: 20px 100px 20px 10px; }.img__container { width: 35px; display: inline-block; margin-right: 0rem; margin-top: 0.5rem; }.img__container img { width: 35px; height: 35px; object-fit: cover; object-position: center; border-radius: 5rem; }.follow__desc { display: inline-block; margin: 0 0 0 0.5rem; font-size: 0.99rem; }.follow__btn { display: inline-block; font-size: 1.2rem; left: 8rem; position: relative; top: -1.6rem; cursor: pointer; }.follow__btn a { text-decoration: none; padding: 1rem 1.5rem; background-color: #222095; color: #ffffff; border-radius: 1rem; }

 <div class="follow__container"> <div class="follow__content"> <div class="img__container"> <img src="https://www.slashfilm.com/img/gallery/joss-whedon-says-he-cut-cyborgs-justice-league-storyline-because-ray-fisher-is-a-bad-actor/l-intro-1642457019.jpg" alt="Profile Image"> </div> <div class="follow__desc"> <h2>Mr Cyborg</h2> <p>#CyberCity</p> <p>Most Popular</p> </div> <div class="follow__btn"> <a href="#">Follow</a> </div> </div> </div>