响应式卡片布局 CSS 设计未修复

Question

我想制作响应式但不固定的卡片。我应该对 CSS 进行哪些更改才能相应地更改它们的大小。

这里是 fiddle link 这个 Working Fiddle

汽车应该通过调整大小来改变它的大小window但是按钮的位置应该只在底部，不管内容如何，所有卡片的大小应该相同。

CARD.HTML

           <div class = 'col-md-2'>
      <div class="mycard text-center"> 
      <div class="card-header"> 
      <p1>HEADING 1</p1> 
      </div> 
      <div class = "card-block">   
      <div id = "container"> 
      Something will be written here
      </div>  
      </div> 
      <div class = "card-name"> 
      <p2> MY NAME 1 </p2> 
      </div> 
      <div class = 'cardfooter'> 
      <div class='dropdownAD'>
      <button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
      </div> 
      <div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
      </div>
      </div> 
      </div> 

      <div class="mycard text-center"> 
      <div class="card-header"> 
      <p1>HEADING 2</p1> 
      </div> 
      <div class = "card-block">   
      <div id = "container"> 
      Something will be written here
      </div>  
      </div> 
      <div class = "card-name"> 
      <p2> MY NAME 2 , WHOLE PURPOSE IS TO MAKE TO NEXT LINE TO MAKE BUTTONS AT FIXED PLACE </p2> 
      </div> 
      <div class = 'cardfooter'> 
      <div class='dropdownAD'>
      <button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
      </div> 
      <div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
      </div>
      </div> 
      </div> 

      <div class="mycard text-center"> 
      <div class="card-header"> 
      <p1>HEADING 3</p1> 
      </div> 
      <div class = "card-block">   
      <div id = "container"> 
      Something will be written here
      </div>  
      </div> 
      <div class = "card-name"> 
      <p2> MY NAME 3</p2> 
      </div> 
      <div class = 'cardfooter'> 
      <div class='dropdownAD'>
      <button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
      </div> 
      <div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
      </div>
      </div> 
      </div> 

      <div class="mycard text-center"> 
      <div class="card-header"> 
      <p1>HEADING 4</p1> 
      </div> 
      <div class = "card-block">   
      <div id = "container"> 
      Something will be written here
      </div>  
      </div> 
      <div class = "card-name"> 
      <p2> MY NAME 4</p2> 
      </div> 
      <div class = 'cardfooter'> 
      <div class='dropdownAD'>
      <button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
      </div> 
      <div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
      </div>
      </div> 
      </div> 
      </div>

CARD.CSS

      .mycard {
      background-color: #FFC20A;
      color: black;
      margin-bottom: 10px;
      margin-top: 10px;
      margin-left: 10px;
      margin-right: 10px;
      padding: 5px 5px 5px 5px;
      text-align: center;
      height: 200px;
      width: 230px;
      border-radius: 10px;
      font-size: 12px;
      }


      .card-header {
      color: black;
      height:24px;
      padding: 1px 0px 1px 0px;
      font-size: 16px;
      text-align: center;

      }

      .card-block {
      background-color: #b2b2b2;
      color: black;
      border-radius: 10px;
      height: 100px;
      width: 220px;
      }

      .card-name {
        height:35px;
      }

      .cardfooter {
      border-radius: 5px;
      width:100%;
      height: 34px;
      bottom:0;
      margin-bottom: 0px;
      }

Answer 1

我相信你需要做的就是把卡片的width改成min-width。这将强制卡片的宽度为 100%，直到 230px。正如您在我修改后的 JSFiddle 版本中看到的那样。

您应该牢记的是，您的卡片内容被分解成多行内容。每行看起来应该是卡片宽度的 100%，因此您不需要实际为内容应用宽度，只需提供 display: block。这将强制它成为其父级的 100% 宽度。由于内容是其父级的 100% 宽度，因此它的灵活性将始终取决于父级。因此你可以将父级宽度设置为 100%、50%、200px 等等，内容将始终跟随。

如果您需要我澄清任何事情，请告诉我:)

.mycard {
background-color: #FFC20A;
color: black;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
padding: 5px 5px 5px 5px;
text-align: center;
height: 200px;
min-width: 230px;
border-radius: 10px;
font-size: 12px;
}


.card-header {
color: black;
height:24px;
padding: 1px 0px 1px 0px;
font-size: 16px;
text-align: center;

}

.card-block {
background-color: #b2b2b2;
color: black;
border-radius: 10px;
height: 100px;
width: 220px;
}

.card-name {
  height:35px;
}

.cardfooter {
border-radius: 5px;
width:100%;
height: 34px;
bottom:0;
margin-bottom: 0px;
}

<div class = 'col-md-2'>
<div class="mycard text-center"> 
<div class="card-header"> 
<p1>HEADING 1</p1> 
</div> 
<div class = "card-block">   
<div id = "container"> 
Something will be written here
</div>  
</div> 
<div class = "card-name"> 
<p2> MY NAME 1 </p2> 
</div> 
<div class = 'cardfooter'> 
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div> 
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div> 
</div> 

<div class="mycard text-center"> 
<div class="card-header"> 
<p1>HEADING 2</p1> 
</div> 
<div class = "card-block">   
<div id = "container"> 
Something will be written here
</div>  
</div> 
<div class = "card-name"> 
<p2> MY NAME 2 , WHOLE PURPOSE IS TO MAKE TO NEXT LINE TO MAKE BUTTONS AT FIXED PLACE </p2> 
</div> 
<div class = 'cardfooter'> 
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div> 
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div> 
</div> 

<div class="mycard text-center"> 
<div class="card-header"> 
<p1>HEADING 3</p1> 
</div> 
<div class = "card-block">   
<div id = "container"> 
Something will be written here
</div>  
</div> 
<div class = "card-name"> 
<p2> MY NAME 3</p2> 
</div> 
<div class = 'cardfooter'> 
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div> 
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div> 
</div> 

<div class="mycard text-center"> 
<div class="card-header"> 
<p1>HEADING 4</p1> 
</div> 
<div class = "card-block">   
<div id = "container"> 
Something will be written here
</div>  
</div> 
<div class = "card-name"> 
<p2> MY NAME 4</p2> 
</div> 
<div class = 'cardfooter'> 
<div class='dropdownAD'>
<button class='dropbtnAD' onclick="AddIt()">Add Courses</button>
</div> 
<div class='dropdownGR'><button class='dropbtnGR'>Remove</button>
</div>
</div> 
</div> 
</div>

响应式卡片布局 CSS 设计未修复

Responsive Card Layout CSS Design not Fixed

javascript

css

cardlayout