css - 想要在 .net 项目中修复我的 .cshtml 中的 CSS 和引导程序问题

Question

我想要第一条和第二条记录之间的空格。我在玩 CSS，但到目前为止还没有运气。请在下面查看我的代码并建议我这样做。

我正在寻找如下图所示的输出

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div class="container col-md-12">
    <table style="background-color: rosybrown; border:dashed;">

        @foreach (var item in Model)

        {

            <div class="card">
                <div class="card-avatar col-md-2">
                    <img src="~/Content/images/logo3.png" style="width:100%" />
                </div>
                <div class="card-details">
                    <div class="name">@Html.DisplayFor(modelItem => item.DoctorName)</div>
                    <div class="degree">BDS, MDS - Oral Medicine and Radiology</div>
                    <div class="exp">14 years experience overall</div>
                    <div class="occupation">@Html.DisplayFor(modelItem => item.Specialization)</div>
                    <div class="like">96%</div>
                    <div class="feedback">120</div>
                    <div class="location">Hamilton, New Zealand</div>
                    <div class="fee">100$</div>
                    <div class="works">32 Smiles Multispeciality Dental Clinic and 15 more clinics</div>
                    <div class="available">Today</div>
                    <div class="card-avatar col-md-2">
                        <img src="~/Content/images/logo3.png" style="width:100%" />
                        <img src="~/Content/images/logo3.png" style="width:100%" />
                        <img src="~/Content/images/logo3.png" style="width:100%" />
                        <img src="~/Content/images/logo3.png" style="width:100%" />
                    </div>
                    <div class="card-about">
                        <div class="item">
                            <span class="value">Artificial Teeth</span>
                            <span class="label">Conservative</span>
                        </div>
                        <div class="item">
                            <span class="viewservice">40 services </span>
                            <span class="label">Weight</span>
                        </div>
                        <div class="item">
                            <span class="btn active">View Profile</span>
                            <span class="btn active">Contact Clinic</span>
                            <span class="btn active">Booking Appointment</span>
                        </div>
                    </div>
                </div>
            </div>


        }

    </table></div>


<style>
        .card {
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            transition: 0.3s;
            width: 40%;
            border-radius: 5px;
        }

            .card:hover {
                box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
            }

        img {
            border-radius: 5px 5px 0 0;
        }

        .container {
            padding: 2px 16px;
        }


        {
            box-sizing: border-box;
        }

        :root {
            --background: white;
            --primary: #ff1ead;
            --secondary: #1effc3;
            --card-size: 300px;
        }      

    .card {
        width: calc(var(--card-size) * 1.586);
        height: var(--card-size);
        border-radius: 0.75rem;
        box-shadow: 0 22px 70px 4px rgba(0,0,0,0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
        background: darkslateblue;
        display: grid;
        grid-template-columns: 40% auto;
        color: white;
        align-items: center;
        will-change: transform;
        transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
        {
            transform: scale(1.1);
            box-shadow: 0 32px 80px 14px rgba(0,0,0,0.36), 0 0 0 1px rgba(0, 0, 0, 0.3);
        }



        .card-details {
            padding: 1rem;
        }

        .name {
            font-size: 1.25rem;
        }

        .occupation {
            font-weight: 600;
            color: var(--primary);
        }

        .card-avatar {
            display: grid;
            place-items: center;
        }

        svg {
            fill: white;
            width: 65%;
        }

        .card-about {
            margin-top: 1rem;
            display: grid;
            grid-auto-flow: column;
        }

        .item {
            display: flex;
            flex-direction: column;
            margin-bottom: 0.5rem;
            .value

        {
            font-size: 1rem;
        }

        .label {
            margin-top: 0.15rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--primary);
        }

        }

        .skills {
            display: flex;
            flex-direction: column;
            margin-top: 0.75rem;
            .label

        {
            font-size: 1rem;
            font-weight: 600;
            color: var(--primary);
        }

        .value {
            margin-top: 0.15rem;
            font-size: 0.75rem;
            line-height: 1.25rem;
        }
        }
    </style>

标签： csstwitter-bootstrap

Answer 1

一些使用技巧。

• 文本总是应该写在里面<p>或者至少写在里面<span>
• 卡片之间的空间可以用margin
• 空白通常是使用padding和margin
• 不要在 css 中复制选择器
• 将内容的每个部分包装起来以<div>进行分组
• 构建你的结构html以保持适当的元素流动
• 使用本指南了解如何使用grid

我花了太长时间创建以下代码段，根据您的喜好调整样式。

:root {
  --background: white;
  --primary: #ff1ead;
  --secondary: #1effc3;
  --card-size: 350px;
}

.card {
  margin: 10px;
  width: calc(var(--card-size) * 1.586);
  height: var(--card-size);
  border-radius: 0.75rem;
  box-shadow: 0 22px 70px 4px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
  background: darkslateblue;
  display: grid;
  grid-template-columns: 10% auto 20%;
  grid-template-rows: auto 20%;
  color: white;
  align-items: center;
  will-change: transform;
  transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 2px 16px;
}

.card-details {
  padding: 1rem;
}

p {
  margin: 0;
}

.white_space {
  margin-top: 20px;
}

.name {
  margin: 1rem 0;
  font-size: 1.25rem;
}

.occupation {
  font-weight: 600;
  color: var(--primary);
}

.card-about {
  margin-top: 1rem;
  display: grid;
}

.item {
  background-color: #bbb;
  margin: 0 0.1rem;
  padding: 7px;
  border-radius: 3px;
}

.item.value {
  font-size: 0.7rem;
}

.item.label {
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
}

.card-btns {
  grid-column-start: 2;
  grid-column-end: end;
  grid-row-start: 2;
  grid-row-end: end;
  justify-self: end;
  margin-right: 20px;
}

.card-btns .btn {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid white;
  background-color: var(--primary);
}

<div class="container">
  <div class="card">
    <div class="card-avatar">
      <img src="~/Content/images/logo3.png" style="width:100%" />
    </div>

    <div class="card-details">
      <div class="details">
        <h4 class="name">DoctorName</h4>
        <p class="degree">BDS, MDS - Oral Medicine and Radiology</p>
        <p class="exp">14 years experience overall</p>
        <p class="occupation">Specialization</p>
        <p class="works white_space">
          32 Smiles Multispeciality Dental Clinic and 15 more clinics
        </p>
      </div>


      <div class="card-avatar">
        <img src="~/Content/images/logo3.png" style="width:100%" />
        <img src="~/Content/images/logo3.png" style="width:100%" />
        <img src="~/Content/images/logo3.png" style="width:100%" />
        <img src="~/Content/images/logo3.png" style="width:100%" />
      </div>

      <div class="card-about">
        <div class="tags">
          <span class="item value">Artificial Teeth</span>
          <span class="item label">Conservative</span>
          <span class="item label">Weight</span>
        </div>
        <div class="viewservice white_space">40 services </div>
      </div>

    </div>

    <div class="card-side">
      <p class="like">96%</p>
      <p class="feedback">120</p>
      <p class="location">Hamilton, New Zealand</p>
      <p class="fee">100$</p>
      <p class="available">Today</p>
    </div>


    <div class="card-btns">
      <span class="btn active">View Profile</span>
      <span class="btn active">Contact Clinic</span>
      <span class="btn active">Booking Appointment</span>
    </div>
  </div>
</div>