html - CSS - 在图像周围堆叠 DIV

<分区>

我想弄清楚如何在图像旁边很好地显示几个 DIV 而不会跳到该图像下方。

举个例子: https://codepen.io/anon/pen/zgzXGr

代码: 代码:

body
  {
  background-color:#000;  
}
#shortspecs-section
  {

    margin:10px;
    display:flex;
    flex-flow:column wrap;

  }

.shortspecs
  {
    background-color:#FFF;
    border-radius:10px;
    padding:15px;
    margin:15px;
    font-size: 1.3em;

  }

.specs-small
{
  max-height:60px;

}


@media only screen and (min-width: 1024px) and (max-width: 9999px) 
  {
    #shortspecs-section
      {
        flex-flow:row wrap;
        justify-content:flex-start;
      }

  }

    <section id="shortspecs-section">
       <div class="shortspecs specs-big">
         <img src="https://static.mobilemultimedia.be/mmu/products/no-phone_300.jpg">
       </div>

       <div class="shortspecs specs-small">
          <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
          19999<br>
          <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img align="left" src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
       
       <div class="shortspecs specs-small">
         <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
         19999<br>
         <span class="smallprint">TEST</span>
       </div>
     </section>

我希望右侧的 DIV 很好地堆叠在图像旁边，而不是直接跳到图像下方。我已经用 Flexbox 和 float 试过了，但到目前为止我还没有设法正确显示 div。

我确定有一个简单的解决方案，但我还没有找到。

有什么想法吗？

谢谢

最佳答案

试试这段代码

HTML

<section id="shortspecs-section">
  <div class="left">
<div class="shortspecs specs-big">
  <img src="https://static.mobilemultimedia.be/mmu/products/no-phone_300.jpg">
  </div>
  </div>
  <div class="right">
<div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
  <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
  <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
  <div class="shortspecs specs-small">
    <img align="left" src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
    <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
    <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
      <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
      <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
      <div class="shortspecs specs-small">
    <img src="https://static.mobilemultimedia.be/mmu/icons/battery.svg">
    19999<br>
    <span class="smallprint">TEST</span>
</div>
  </div>
</section>

CSS

body
  {
  background-color:#000;  
}
#shortspecs-section
    {

    margin:10px;
        display:flex;

    }

.shortspecs
    {
        background-color:#FFF;
        border-radius:10px;
        padding:15px;
        margin:15px;
        font-size: 1.3em;

    }

.specs-small
{
  max-height:60px;

}


@media only screen and (min-width: 1024px) and (max-width: 9999px) 
    {
        #shortspecs-section
            {
            }

    }

.left{

}
.right{
  width:100%;
}
.right .specs-small{
  float:left;
}

参见示例:https://codepen.io/anon/pen/YmQbzR

关于html - CSS - 在图像周围堆叠 DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57308711/

上一篇：css - 如何通过 CSS 检测是否支持 webp 图片

下一篇：html - 删除点击按钮周围的边框

javascript - 在循环中移动元素

html - 如何将 html 转换为图像以在 Facebook、Twitter、电子邮件或类似内容上分享

html - 在 flex 网格中按比例调整图像大小

html - 仅CSS的砌体布局

html - 如何使用 CSS flexbox 设置固定宽度的列

javascript - 通过使用 json 或 html 文件使用 jQuery ajax 自动刷新/更新表

javascript - 如何在单击提交按钮之前隐藏标签？

javascript - 在 browserSync 未运行时通过 jQuery 更改背景图像的问题

javascript - 是否可以使用页面滚动条滚动内部 div？