卡片RWD排版測試

by wllai2001

HTML

<div class='wrap'>
  <!--float-left排版測試-->
  <div class='float-wrap'>  
     <div class='item'>
      <div class='title'>
       Float-Left 卡片1
      </div>
       <div class='content'>
                50 words: The sky was clear and the sun was shining brightly, casting a warm glow over the city. People were out and about, enjoying the beautiful weather. 
      </div>
    </div>
     <div class='item'>
      <div class='title'>
         Float-Left 卡片2
      </div>
       <div class='content'>
        400 words: The rest of the day passed by in a blur of activity. I ran errands, met up with friends, and worked on my own projects. But I couldn't stop thinking about the man in the park. I wondered if he had found a job, if his family was doing okay. I hoped that I had made a difference in his life, even if it was just a temporary one.
      </div>
    </div>
     <div class='item'>
      <div class='title'>
         Float-Left 卡片3
      </div>
       <div class='content'>
         150 words: I continued my stroll, passing by a group of kids playing soccer and a couple having a picnic. A smile crept onto my face as I watched the scene unfold before me. 
      </div>
    </div>
     <div class='item'>
      <div class='title'>
        Float-Left 卡片4
      </div>
       <div class='content'>
     
      100 words: As I walked through the park, I couldn't help but feel grateful for this moment of peace and tranquility. The hustle and bustle of the city seemed so far away. The birds were chirping and the leaves rustling in the gentle breeze. I took a deep breath and savored the fresh air.
      </div>
    </div>
  </div>

  <!--inline-block排版測試-->
  <div class='block-wrap'>
   <div class='item'>
      <div class='title'>
        Inline-Block 卡片1
      </div>
       <div class='content'>
                50 words: The sky was clear and the sun was shining brightly, casting a warm glow over the city. People were out and about, enjoying the beautiful weather. 
      </div>
...

CSS

.block-wrap,.float-wrap{
  margin:10px auto;
  border-bottom:1px solid #ccc;
  display:flex;
  flex-wrap: wrap;
}

.float-wrap > div.itme{
  float:left;  
}

.block-wrap > div.item{  
  display:inline-block; 
}

.item{
  margin:10px;  
  flex: 1 1 200px;
  width:200px;
  border:1px solid #ccc;
  box-sizing: border-box;
}

.title{
  text-align:center;
  background:#ccc;
  line-height:32px;
}

.content{
  padding:5px;
  
}