Question

在这种情况下，我希望图像位于左侧，然后作者姓名位于图像旁边，然后低于我试图使按钮居中的位置。我把图片和按钮放在中心位置，但是当我添加作者名字时，它就全部消失了。

另外，我将如何让一切变得更小。我尝试过调整高度和宽度，但作者图像最终会在该部分之外。

＆＃13;

.authorbio {
  background-color: #000;
  border-radius: 10px;
  border: 4px dotted #870505;
  line-height: 50px;
  width: 55%;
  height: 55%;
  margin: 0 0 10px 10px;
}
.authorbio>h1 {
  vertical-align: right;
  text-align: center;
}
.authorbio>img {
  border: 1px solid #870505;
  border-radius: 20px;
  width: 150px;
  height: 150px;
  margin: 10px;
  vertical-align: middle;
}
/* social links
--------------------------------------- */

a.sociallinks {
  -webkit-border-radius: 5px 5px;
  border: solid 1px rgb(0, 0, 0);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(76, 68, 68)), to(rgb(22, 21, 21)));
  color: #ccc;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding: 2px 2px;
  font-size: 20px;
  font-weight: bold;
}
a.sociallinks:hover {
  -webkit-border-radius: 5px 5px;
  border: solid 1px rgb(0, 0, 0);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(224, 0, 0)), to(rgb(61, 2, 2)));
  color: #ccc;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding: 2px 2px;
  font-size: 20px;
  font-weight: bold;
}
a.sociallinks:visited {
  -webkit-border-radius: 5px 5px;
  border: solid 1px rgb(0, 0, 0);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(96, 96, 96)), to(rgb(2, 2, 2)));
  color: #000;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding: 2px 2px;
  font-size: 20px;
  font-weight: bold;
}
a.sociallinks:active {
  -webkit-border-radius: 5px 5px;
  border: solid 1px rgb(0, 0, 0);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(30, 30, 30)), to(rgb(70, 70, 70)));
  color: #ccc;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding: 2px 2px;
  font-size: 20px;
  font-weight: bold;
}

＆＃13;

<div class="authorbio">
  <img src="https://images-na.ssl-images-amazon.com/images/I/61mO3gFua5L._UX250_.jpg" alt="Paula Cappa" />
  <h1><a href="https://www.goodreads.com/author/show/6553133.Paula_Cappa" target="_blank" title="Paula Cappa on Goodreads">Paula Cappa</a></h1>
  <br /><a class="sociallinks" href="http://www.amazon.com/Greylock-Paula-Cappa-ebook/dp/B0168XVNZS/ref=cm_cr_pr_product_top?ie=UTF8" rel="nofollow" target="_blank" title="Greylock on Amazon">Amazon</a>  <a class="sociallinks" href="http://www.facebook.com/paula.cappa.94"
  target="_blank" title="Author Paula Cappa on Facebook">Facebook</a>  <a class="sociallinks" href="https://www.goodreads.com/book/show/26887306-greylock" target="_blank" title="Greylock on Goodreads">Goodreads</a>  <a class="sociallinks" href="https://www.smashwords.com/books/view/582884"
  target="_blank" title="Greylock on Smashwords">Smashwords</a>  <a class="sociallinks" href="https://twitter.com/PaulaCappa1" target="_blank" title="Paula Cappa Twitter">Twitter</a>  <a class="sociallinks" href="https://paulacappa.wordpress.com/" target="_blank"
  title="Paula Cappa Wordpress">Website</a>
</div>

＆＃13;

Answer 1

检查是否有效 Codepen example

我刚刚制作了标题inline-block并使用有用的calc属性相应地调整了宽度。

＆＃13;
＆＃13;
.authorbio>h1{ vertical-align: right; text-align: center; display: inline-block; width: calc(100% - 175px); /* substract the image's width + some extra */ }
＆＃13;
＆＃13;
＆＃13;

然后将链接放在容器中以应用一些flex属性（justify-content: center完成了魔法）。

＆＃13;
＆＃13;
<div class="sociallinks-container">  ... </div>
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13;
.sociallinks-container { display: flex; flex-wrap: nowrap; /* this prevents the items wrapping to another line */ justify-content: center; /* this centers the links */ }
＆＃13;
＆＃13;
＆＃13;

Answer 2

尝试这个，你只需要替换图像和链接地址。我为你写了一个完整的代码。如果不是这样，请告诉我。

<!DOCTYPE html>
<html>
<head>
<title>hover</title>

<style type="text/css">
  body{
    margin:0;
    padding:0;
  }

div.bio{
  width: 500px;
  height: 400px;
  margin: 1%;
  padding: 10px;
  background-color: black;
  border: 3px dotted red;
  border-radius: 5px;
}

div.autorimage{
  width: 150px;
  height: 150px;
  border: 2px solid red;
  box-shadow: 1px 2px 1px white;
  border-radius: 5px;
}

div.autorimage img{
  width: 100%;
  height: 100%;
}

div.authorlink{
  width: 100%;
  text-align: center;
}

div.authorlink a{
  font-size: 45px;
}

div.authorlink a:hover{
  text-decoration: none;
  color: red;
}

div.buttonsetone{
  width: 100%;
}

div.buttonsettwo{
  width: 100%;
  margin-top: 50px;
}

div.buttonsetone div{
  width: auto;
  background-color: gray;
  text-align: center;
  float: left;
  margin-left: 3%;
  padding: 1%;
  border: 1px solid white;
  border-radius: 5px;
}

div.buttonsetone div:hover{
  background-color: red;
}

div.buttonsetone div a{
  text-decoration: none;
  color: white;
  font-size: 35px;

}

div.buttonsettwo div{
  width: auto;
  background-color: gray;
  text-align: center;
  float: left;
  margin-left: 3%;
  padding: 1%;
  border: 1px solid white;
  border-radius: 5px;
}

div.buttonsettwo div:hover{
  background-color: red;
}

div.buttonsettwo div a{
  text-decoration: none;
  color: white;
  font-size: 35px;
}


</style>

</head>
<body>

 <div class="bio">
    <div class="autorimage"><img src=""></div><br/>
    <div class="authorlink"><a href="#">Paula Cappa</a></div><br/>
    <div class="buttonsetone">
      <div><a href="#">Amazon</a></div>
      <div><a href="#">Facebook</a></div>
      <div><a href="#">Goodreads</a></div>
    </div><br/>
    <div class="buttonsettwo">
      <div><a href="#">Smashwords</a></div>
      <div><a href="#">Twitter</a></div>
      <div><a href="#">WebSite</a></div>
    </div>
 </div>


</body>



</html>

无法通过html和css

2 个答案: