Wrapping Text Pushing Image Above It Up When

I need a little help preventing some text below and image from pushing the image up when it wraps. Please see the attached image to best understand what I'm talking about. The goal is to get all of the icons lined up horizontally and have "This Text Is" line up with "Some Text" and "More Text". "Longer" should be below everything else on its own line.

Each of the icons and text are wrapped in their own container divs like so:

  <div class = "icon">
    <a href = "#">
     <img src = "icon.png" />
     <h3>Some Text</h3>
   </a>
  </div>

Here's the CSS which I'm using to create fixed width columns:

  .icon {
    display: inline-block;
    width: 150px;
  }

It seems like the "display: inline-block" is causing the problem, but if I change it to "inline" the icon divs lose their fixed width. Using margin, padding, or positioning to move the icons that are being pushed up back down is not a valid solution because that would get messy. There are 10 icons total and the icon div width changes depending on the browser width (which makes the text wraps at different points depending on the browser width). I was hoping there was an easy CSS solution such as "vertical-align" (which didn't work).

Any help would be greatly appreciated.

---

You said vertical-align did not work. This should align images that have an equal height to the top:

.icon {
  vertical-align: top;
}

---

你可以把它包装在一个flex容器里，在flex里写得很棒

  .icon {
    display: inline-block;
    width: 150px;
  }
  .container{display:flex}

 <div class="container">
 <div class = "icon">
    <a href = "#">
     <img src = "http://placehold.it/150x150" />
     <h3>Some Text</h3>
   </a>
  </div>
   <div class = "icon">
    <a href = "#">
     <img src = "http://placehold.it/150x150" />
     <h3>more Text</h3>
   </a>
  </div>
   <div class = "icon">
    <a href = "#">
     <img src = "http://placehold.it/150x150" />
     <h3>Some Longer Text with 2 lines</h3>
   </a>
  </div>
  </div>

---

您可以浮动容器中留下的图标，并使容器触发回流以包含图标。

.icon {
    float: left;
    display: block;
}

.container {
    overflow: hidden;
}

链接地址: http://www.djcxy.com/p/81368.html

上一篇: 当包装变得不必要地宽时，<div>延伸

下一篇: 环绕文字推动图像在它上面时