Question

我试图弄清楚如何在图像旁边很好地显示几个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。

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

有什么主意吗？

谢谢

Answer 1

尝试此代码

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

Answer 2

请尝试使用此代码。

css

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Removes padding behaviour on widths */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background-color:#000;
}
#shortspecs-section {
    margin:10px;
}
.specs-big {
    width: 25%;
    float: left;
}
.small_divs {
    width: 72%;
    float: right;
}
img {
    max-width: 100%;
    height: auto;
}
.shortspecs {
    background-color:#FFF;
    border-radius:10px;
    padding:15px;
    font-size: 1.3em;
}
.specs-small {
  min-height: 90px;
  float: left;
  width: 15%;
  margin-right: 4%;
  margin-bottom: 30px;
}

@media only screen and (max-width: 797px) {
    .specs-big {
        width: 100%;
        margin-bottom: 30px;
    }
    .small_divs {
        width: 100%;
    }
    .specs-small {
        width: 46%;
        margin-right: 7%;
    }
    .specs-small:nth-child(2n+2) {
        margin-right: 0px;
    }
}

HTML

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

   <div class="small_divs">
   <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>

Answer 3

您可以将specs-small放置在div中，并设置宽度。

然后您给.specs-small { width: 90px; display: inline-block;}

请参阅codepen：https://codepen.io/anon/pen/OKgGGe

CSS-围绕图像堆叠DIV

3 个答案: