Question

我正在一个自己在Squarespace上构建的网站上工作，这就是为什么我尝试使用内联CSS编写此内容的原因。我正在尝试使用某些文本连续设置样式的图像。图片应为该行的1/12。我需要在html / css中执行此操作，因为在我在jsfiddle中所描述的行下方将有其他相同样式的行。

我似乎无法使他的图像按比例缩小并适合与文本相同的行，并且高度与文本相同。我让它工作了，然后不小心恢复了我的工作...所以该休息一下了。希望有人在我回到我之前可怜我。

这是我的带有图片和文字的JSFiddle：https://jsfiddle.net/hrwj2u7c/

<div style="display:flex;flex-direction:row;flex-wrap:wrap;background-color:#bcc0c6">  
    <div style="flex:0 1 150px;">
            <img src=http://creaturesoundproductions.com/s/HelpSpeaker.png>
    </div> 
    <div style="flex:1 0 auto;">
        <span style="font-weight:bold;font-size:24px; ">I'm new to podcasting, and I don't know where to start!</span>
        <p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording. We'll even be happy to teach you, so that you'll be more educated going forward!   
        </p>
    </div>  
</div>

Answer 1

这是您要实现的目标吗？

<div style="display:flex;flex-direction:row;align-items: center;background-color:#bcc0c6">
  <div style="flex: 0 0 150px;">
    <img src=http://creaturesoundproductions.com/s/HelpSpeaker.png style="width: 100%">
  </div>
  <div>
    <span style="font-weight:bold;font-size:24px; ">I'm new to podcasting, and I don't know where to start!</span>
    <p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording.
      We'll even be happy to teach you, so that you'll be more educated going forward!
    </p>
  </div>
</div>

要点：

flex-basis: 150px; flex-grow: 0;在图像容器上
width: 100%;上的<img>
从整个包装器中删除flex-wrap: wrap（这将导致第二个div移到下面）。
我还向包装器中添加了align-items: center，以使弹性项目垂直对齐。您无法真正匹配它们的高度，因为您会注意到第二个div的高度在页面的各个宽度上都有很大的不同，但是您可以将它们垂直对齐。

现在，您要执行的操作（内联样式）的最大问题是它无法响应，因为您无法通过使用@media条查询内联样式。但是，您可以使用<style>中的<body>标签。示例：

<style type=text/css>
  .wrapper {
    padding: 25px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #bcc0c6;
  }
  
  .wrapper> :first-child {
    flex: 0 0 200px;
  }
  
  .wrapper> :first-child img {
    width: 100%;
  }
  
  .wrapper> :nth-child(2) {
    padding: 0 0 0 25px;
  }
  .wrapper> :nth-child(2)>span {
    font-weight: bold;
    font-size: 24px;
  }
  
  @media (max-width: 700px) {
    .wrapper {
      flex-wrap: wrap;
    }
    .wrapper> :first-child {
      margin: 0 auto;
    }
  }
</style>
<div class="wrapper">
  <div>
    <img src=http://creaturesoundproductions.com/s/HelpSpeaker.png>
  </div>
  <div>
    <span>I'm new to podcasting, and I don't know where to start!</span>
    <p>That's OK, we've got you! Start here with us, and we'll do all of the technical stuff for you. Have you heard of hosting, RSS feeds, maybe editing? We'll do all of that for you. All you have to do is use our unique app on any device and start recording.
      We'll even be happy to teach you, so that you'll be more educated going forward!
    </p>
  </div>
</div>

使用内联样式的简单flexbox网格

1 个答案: