Question

预期的输出图像插图：

expected output image illustration

html, body 
{

    max-width: 100vw;
    max-height: 100vh;
}
html *
{
  font-family: Arial !important;
}
.cand1
{
    width: 50%;
    float:left;
}
.cand2
{
    width:50%;
    float: right;
}
.prof1,.prof2
{
    margin:0;
    margin-top: 40;
    text-align: center;
}
.name
{
    font-weight: bold;
}
.post
{
    font-weight: bolder;
 

}
.card
{
    
    background: rgb(230, 230, 230);
    
}
h4
{

    
    background: rgb(230, 230, 230);
}

<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles/style_vote.css">
</head>
<body>
  <div id="header"></div>
  <div id="wrapper">
    <div id="content">

      <div class="card">
        <h4 class="post">Post 1</h4>
        <div class="cand1">
          <div class="prof1">
            <img src="images/dummy1.jpg">
            <p class="name">Candidate 1</p>
            <p class="add">Class</p>
          </div>
        </div>
        <div class="cand2">
          <div class="prof2">
            <img src="images/dummy1.jpg">
            <p class="name">Candidate 2</p>
            <p class="add">Class</p>
          </div>
        </div>
      </div>

      <div class="card">
        <h4 class="post">Post 2</h4>
        <div class="cand1">
          <div class="prof1">
            <img src="images/dummy1.jpg">
            <p class="name">Candidate 3</p>
            <p class="add">Class</p>
          </div>
        </div>
        <div class="cand2">
          <div class="prof2">
            <img src="images/dummy1.jpg">
            <p class="name">Candidate 4</p>
            <p class="add">Class</p>
          </div>
        </div>
      </div>

      <div class="card">
        <h4 class="post">Post 3</h4>
        <div class="cand1">
          <div class="prof1">
            <img src="images/dummy1.jpg">
            <p class="name">Candidate 5</p>
            <p class="add">Class</p>
          </div>
        </div>
        <div class="cand2">
          <div class="prof2">
            <img src="images/dummy1.jpg">
            <p class="name">Candidate 6</p>
            <p class="add">Class</p>
          </div>
        </div>
      </div>

      <div class="card">
        <h4 class="post">Post 4</h4>
        <div class="cand1">
          <div class="prof1">
            <img src="images/dummy1.jpg">
            <p class="name">Candidate 7</p>
            <p class="add">Class</p>
          </div>
        </div>
        <div class="cand2">
          <div class="prof2">
            <img src="images/dummy1.jpg">
            <p class="name">Candidate 8</p>
            <p class="add">Class</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>
</html>

当前输出图像：

current output image 我正在尝试用html和css实现类似样式的卡片。 div卡中的h4标签产生空格，在css中使用margin 0和padding 0时会产生白线，我也找不到拆分每张卡，尝试过的margin以及card div的padding属性，“似乎行得通。

我在整个卡div上应用的属性似乎也不适用于h4标签，修改其他属性（例如卡div上的高度）会使虚拟图像从卡div部分弹出

Answer 1

由于您的代码非常混乱，因此我为您创建了一个简单的示例。希望对您有所帮助。

也请避免使用!important来保持代码的清洁和可维护。

section {
  background: gray;
  padding: 10px 25px;
  margin: 0 0 25px 0;
}

section h4 {
  margin: 0 0 10px 0;
}

.card-wrapper {
  display: flex;
  justify-content: space-around;
}

.card--text {
  text-align: center;
}

<div class="container">
  <section>
    <h4>Post</h4>
    <div class="card-wrapper">
      <div class="card">
        <img src="https://dummyimage.com/150x150/000/fff" />
        <p class="card--text">
          I am the Text
        </p>
      </div>
      <div class="card">
        <img src="https://dummyimage.com/150x150/000/fff" />
        <p class="card--text">
          I am the Text
        </p>
      </div>
    </div>
  </section>
  <section>
    <h4>Post</h4>
    <div class="card-wrapper">
      <div class="card">
        <img src="https://dummyimage.com/150x150/000/fff" />
        <p class="card--text">
          I am the Text
        </p>
      </div>
      <div class="card">
        <img src="https://dummyimage.com/150x150/000/fff" />
        <p class="card--text">
          I am the Text
        </p>
      </div>
    </div>
  </section>
</div>

麻烦在html和css中实现类似视图的卡

1 个答案: