Question

我是HTML的初学者，我正在创建我的第一个网站。

.header {
  text-align: center;
  color: #ffffff;
  font-family: tahoma;
}

body {
  background: linear-gradient(to top right, #39B59D, #139BDA, #0066FF, #061CFF);
  background-attachment: fixed;
}

.img {
  text-align: center;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  color: #ffffff;
  width: 500;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  color: #ffffff width=500;
}

<div class="card">
  <p style="text-align:center;"><img src="https://image.ibb.co/nAaqJG/rappatic.png" alt="rappatic"></p>
  <div class="container">
    <h2 class="header">Hi, I'm rappatic.</h2>
    <p class="header">I code when I feel like it.</p>
    <p>&nbsp;</p>
  </div>
</div>

正如您所看到的，当它运行时，代码会显示一张几乎遍布页面整个宽度的卡片。不过，我认为这有点难看。有没有办法让卡片只延伸到50％或60％的页面？或者，如果不可能，请设置一定数量的像素？

提前致谢。

Answer 1

你很难在宽度值中错过单位，所以你必须这样做：

width: 500px;

.header {
  text-align: center;
  color: #ffffff;
  font-family: tahoma;
}

body {
  background: linear-gradient(to top right, #39B59D, #139BDA, #0066FF, #061CFF);
  background-attachment: fixed;
}

.img {
  text-align: center;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  color: #ffffff;
  width: 500px;
  margin: auto;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  color: #ffffff;
}

<div class="card">
  <p style="text-align:center;"><img src="https://image.ibb.co/nAaqJG/rappatic.png" alt="rappatic"></p>
  <div class="container">
    <h2 class="header">Hi, I'm rappatic.</h2>
    <p class="header">I code when I feel like it.</p>
    <p>&nbsp;</p>
  </div>
</div>

如果您想要50％，则只需将其设为width:50%，然后您可以添加margin:auto进行居中

.header {
  text-align: center;
  color: #ffffff;
  font-family: tahoma;
}

body {
  background: linear-gradient(to top right, #39B59D, #139BDA, #0066FF, #061CFF);
  background-attachment: fixed;
}

.img {
  text-align: center;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  color: #ffffff;
  width: 50%;
  margin: auto;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  color: #ffffff;
}

<div class="card">
  <p style="text-align:center;"><img src="https://image.ibb.co/nAaqJG/rappatic.png" alt="rappatic"></p>
  <div class="container">
    <h2 class="header">Hi, I'm rappatic.</h2>
    <p class="header">I code when I feel like it.</p>
    <p>&nbsp</p>
  </div>
</div>

Answer 2

对于中心，此卡在.card部分中使用此代码：

margin-left:auto;
margin-right:auto;

Answer 3

要设置某些内容的宽度，您可以使用width属性：

width: 500px;
width: 50%;
width: 50vw;

您可以使用不同的单位，例如px（像素）%（页面宽度的百分比）和vw（窗口宽度的百分比）。可能还有其他人，但那些是我所知道的。

在HTML中更改卡片的宽度

3 个答案: