html - 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

如果您不希望文本 float 在图像周围(即也位于图像下方)，您应该对图像和文本容器都使用 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>