简单横幅广告-是否有更好的桌面和移动版面布局方式？ （Flexbox / CSS Grid）

Posted 2023-01-07

我正在尝试创建一个简单的html标语广告，并使它响应桌面和移动设备。我当前的版本适用于台式机，但我可以肯定，使用大量绝对位置并不是解决此问题的最佳方法。我一直在研究Flexbox或CSS Grid，并认为这可能是一条路线。我还考虑过使用简单的Bootstrap列。关于实现此目标的最有效方法的任何建议？

我觉得我有很多我不需要的CSS集。希望使之尽可能简单。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS9ENXJ2dUIyLnBuZyJ9” alt =“横幅广告的样机”>

<div class='ad-banner-container'>
  <div class='full-size-banner'>
  <div class='image-container'>
    <img class='banner-image' src="https://via.placeholder.com/150" alt="Img Alt Text">
  </div>
  <div class='text-column'>
    <p class='ad-title'>Ad Title</p>
    <p class='ad-body-text'>This is where the detail text goes</p>
  </div>
  <button class='cta-btn' data-target="#myModal">Call to Action</button>
</div>

Link to Codepen with current version - HTML and CSS

答案

我使用了Sass和自定义标签，抱歉。但是我对此很开心。

Codepen：https://codepen.io/bstees/pen/KKwVVqw

HTML

<banner-container>
  <banner-ad>
    <image-container>
      <img class='banner-image' src="https://via.placeholder.com/150" alt="Img Alt Text">
    </image-container>
    <text-column>
      <p class='ad-title'>Ad Title</p>
      <p class='ad-body-text'>This is where the detail text goes</p>
    </text-column>
    <button data-target="#myModal">Call to Action</button>
  </banner-ad>

</banner-container>

SASS

banner-container 
  height: 160px;
  padding: 36px;
  background-color: #F2F7F7;
  font-family: "Open Sans", sans-serif;
  *  box-sizing: border-box; 



banner-ad 
  display: flex;
  align-items: center;
  background-color: #fff;
  max-width: 1082px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
  flex-wrap: wrap;

  image-container 
    flex: 0;
    width: 150px;
    height: 150px;
    padding-right: 36px;
    img 
      width: 150px;
      height: 150px;
    
  

  text-column 
    display: block;
    flex: 1;
    padding: 1em;
    min-width: 600px;

    .ad-title 
      font-size: 18px;
      color: black;
      margin: 5px 5px 15px 5px;
    

    .ad-body-text 
      margin: 5px 5px 10px 5px;
      font-weight: 300;
      font-size: 16px;
    
  

  button 
    border: 2px solid #007DBA;
    background-color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    color: #007DBA;
    margin: 1em;
    padding: 1em 2em;
    flex: 1 0;
  

  button:hover 
    background-color: #007DBA;
    border-color: #007DBA;
    color: #ffffff;