Wordpress Bio/Image Widget - 全尺寸的堆叠标题，较小的并排标题

Question

我觉得问一些看起来很初级的东西很傻，但我就是想不通。

我有一个带有侧边栏的 Wordpress 主题。我想在旁边放一个简单的作者简介（一张图片，下面有一点文字和一个链接）。

当主题响应下降时，此侧边栏会下降到主要内容区域下方并变得巨大，所以我希望布局切换到左侧较小的图像和右侧的文本。

看起来很简单，但我一直在尝试编写或从互联网上获取的各种代码仍然无法正常工作。

这是我迄今为止一直在尝试的 HTML 和 CSS：

<div id="bioblock">
  <img id="bioimg" src="via.placeholder.com/600x600" alt="Blog Author" style="width:100%; margin-bottom: 10px;">
  <div id="bioblurb">
    <h3>Welcome to My Blog</h3>     
    <p>This is a bit about the blog and the author. It will be several lines long.</p>
  </div>
</div>

CSS：

#bioblock {
    padding-bottom: 0;
}

@media screen and (min-width: 0px) and (max-width: 1024px) {
  #bioblock { display: block; width: 50%;}
  #bioblock #bioimg {height: auto; display: inline; float: left;}
  #bioblock #bioblurb { float: right; } 
}

我试图找到一个预先存在的小部件来处理这个问题，但作者的生物小部件很糟糕，而且图像+标题的小部件似乎无法解决它。

我很乐意为任何人提供任何帮助。我确定我在这里犯了无数愚蠢的错误，请不要对我的代码笑得太厉害。随意将我愚蠢的代码尝试烧毁，并提出另一种方法来做到这一点！

Answer 1

如果您不希望文本在图像周围浮动（即也在其下方），您应该对图像和文本容器使用display: inline-block，两者都具有固定宽度（表示百分比或像素，选择这样两者都可以并排放入父元素中）。使用其他一些设置也很好，见下文。

@media screen and (max-width: 1024px) {
  #bioblock {
    display: block;
    width: 50%;
  }
  #bioblock #bioimg {
    height: auto;
    display: inline-block;
    width: 35% !important;
    height: auto;
    vertical-align: top;
  }
  #bioblock #bioblurb {
    display: inline-block;
    width: 60%;
    margin-left: 2%;
    vertical-align: top;
  }
  h3 {
    margin-top: 0;
  }
}

<div id="bioblock">
  <img id="bioimg" src="http://via.placeholder.com/600x600" alt="Blog Author" style="width:100%; margin-bottom: 10px;">
  <div id="bioblurb">
    <h3>Welcome to My Blog</h3>
    <p>This is a bit about the blog and the author. It will be several lines long.</p>
  </div>
</div>