Question

我有一些关于＆＃34; foo＆＃34;的短文。和＆＃34; bar＆＃34;图片。我想并排对齐图像和这些相应的文本，目前我用if Sh <= Shift then伪元素到达了它。

但也许，更好的方法是实现它，也许使用flexbox？

::after

Answer 1

是的！您可以使用 CSS Flexbox 。但是你必须稍微改变你的结构。

看看下面的代码段（我已经缩小了一点点图片以使它们正确适合框架）：

＆＃13;

.image {
  display: flex;
  align-items: center;
}

.image img {
  max-height: 200px;
  margin-right: 15px;
}

＆＃13;

    <div class="image">
      <img src="http://i.imgur.com/yyJ04Sa.png">
      <div>
      <p class="caption">Caption</p>
          <p>Text about Foo. Text text text text text text text text text 
    text text text text text text text text text text text text text 
    text text</p>
      </div>
    </div>

    <div class="image">
      <img src="http://i.imgur.com/iWUPy0n.png">
      <div>
      <p class="caption">Caption</p>
          <p>Text about Bar. Text text text text text text text text text 
    text text text text text text text text text text text text text 
    text text</p>
      </div>
    </div>

＆＃13;

希望这有帮助！

Answer 2

<div style="display: box">
  <div style="width: 250px"> Content here </div>
  <div style="width: 250px"> Content here </div>
</div>

您可以查看以下链接： - https://www.smashingmagazine.com/2011/09/css3-flexible-box-layout-explained/可能对您有帮助。

使用flexbox并排显示小文本和大图像

2 个答案: