文章/答案/技术大牛

发布

社区首页 >问答首页 >使用内联样式的简单柔性盒网格

问使用内联样式的简单柔性盒网格
EN

Stack Overflow用户

提问于 2019-02-17 05:58:06

回答 1查看 595关注 0票数 1

我是在一个网站上工作，我正在为自己构建的广场，这就是为什么我试图写这个使用内联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>

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-17 06:02:18

这就是你想要达到的目标吗？

<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%; on <img>
从整个包装器中删除flex-wrap: wrap (这将导致第二个div下降)。
我还将align-items: center添加到包装器中，以便垂直对齐flex项。您不能真正匹配它们的高度，因为您会注意到第二个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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54730576

复制

相似问题

问使用内联样式的简单柔性盒网格
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用内联样式的简单柔性盒网格EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用内联样式的简单柔性盒网格
EN