html/css 图库 div - 如何在线显示文本

Question

谁能帮我设置（时间+制造商名称一行）

及以下 （价格并添加到购物车）也在一条线上？ 不幸的是，我不知道为什么，但我无法插入所有代码。

这是目前的结果：

结果除外：

谁能帮我设置（时间+制造商名称一行）

及以下 （价格和添加到购物车）也在一行中？

这是我的代码：

<style>
        div.gallery {
          margin: 5px;
          border: 1px solid #ccc;
          float: left;
          width: 480px;
        }
        
        @media only screen and (max-width: 600px) {
        div.gallery {
          margin: 8px;
          border: 1px solid #ccc;
          float: center;
          width: 370px;
        }
        }
        
        div.gallery:hover {
          border: 1px solid #777;
        }
        
        div.gallery img {
          width: 100%;
          height: auto;
        }
        
        div.desc {
          padding: 15px;
          text-align: center;
        }
        div.desc1 {
          padding: 10px;
          text-align: center;
        color: black;
        }
        div.desc2 {
        font-size: 14px;
          text-align: center;
        color: black;
        }
        div.desc3 {
        font-size: 18px;
          padding: 2px;
          text-align: right;
        color: black;
        }
        div.desc4 {
        font-size: 16px;
          text-align: right;
        color: grey;
        }
        
        #clock1 {
          text-align: left;
          font-size: 18px;
          color: black;
          margin-top:5px;
            overflow: hidden;
        }
        #pricebox {
          text-align: left;
          font-size: 20px;
          color: black;
          margin-top:20px;
            overflow: hidden;
            white-space: nowrap;
        }
        .button {
          background-color: #d03a0a; /* Green */
          border: none;
          color: white;
          padding: 15px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 16px;
          margin: 4px 2px;
          cursor: pointer;
        }
        .button4 {border-radius: 16px;}
        </style>

        <! Produkt 1 -->
        <div class="gallery"> 
        <div class="desc1">#BOX1</div>
        <a href="img_5terre.jpg" target="_blank" rel="noopener"> <img src="https://underbox.pl/pub/media/wysiwyg/tshirt_karl.png" alt="Cinque Terre" width="800" height="600"> </a>
        <div class="desc"><div id="clock1">timmer</div><div class="desc3">KARL LAGERFELD</div><div class="desc4">Zestaw 3x Polo</div><div id="pricebox"><s>309,00zł</s> <font color="red">198,00zł</font></div><button class="button button4">Szybki zakup</button></div>
        </div>

Answer 1

将width:50%; float:left; 添加到前两个div 元素中的每一个元素是解决此问题的一种方法。并使用width:33%; float:left; 将公共类添加到第二行将第二行项目放在一起（在将button 向上移动到与前两个项目相同的div 之后）。

此外，font 标记和 s 元素已被弃用。样式应该用 CSS 来完成。

.red { color:red; }
.right { text-align:right; }
.third { display:inline-block; width: 33%; float:left; font-size:1.5em;}
.strike { text-decoration:line-through; }

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 480px;
}
        
@media only screen and (max-width: 600px) {
  div.gallery {
    margin: 8px;
    border: 1px solid #ccc;
    float: center;
    width: 370px;
  }
}
        
div.gallery:hover {
  border: 1px solid #777;
}
        
div.gallery img {
  width: 100%;
  height: auto;
}

div.desc1 {
  padding: 10px;
  text-align: center;
  color: black;
}

div.desc2 {
  font-size: 14px;
  text-align: center;
  color: black;
}

div.desc3 {
  font-size: 18px;
  text-align: right;
  color: black;
  width:50%;
  float:right;
}

div.desc4 {
  font-size: 16px;
  text-align: right;
  color: grey;
}
        
#clock1 {
  text-align: left;
  font-size: 18px;
  color: black;
  overflow: hidden;
  width:50%; 
  float:left;
}

#pricebox {
  text-align: left;
  font-size: 20px;
  color: black;
  margin-top:20px;
  overflow: hidden;
  white-space: nowrap;
}

.button {
  background-color: #d03a0a; /* Green */
  border: none;
  color: white;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button4 {border-radius: 16px;}

<div class="gallery"> 
  <div class="desc1">#BOX1</div>
    <a href="img_5terre.jpg" target="_blank" rel="noopener"> 
      <img src="https://underbox.pl/pub/media/wysiwyg/tshirt_karl.png" 
           alt="Cinque Terre" width="800" height="600"> 
    </a>
    <div class="desc">
      <div id="clock1">timer</div>
      <div class="desc3">KARL LAGERFELD</div>
      <div class="desc4">Zestaw 3x Polo</div>
      <div id="pricebox">
        <span class="third strike">309,00zł</span>
        <span class="red third">198,00zł</span>
        <span class="third right"><button class="button button4">Szybki zakup</button></span>
      </div>
    
  </div>
</div>