使用Flex在标题和文本左侧显示图标

Question

我正在尝试使用Flex创建一种带有SVG图标和标题和文本的'blurb‘类型。我附上了一个可视化的例子来向你展示我试图实现的目标。

​

​

我感觉很接近，但到目前为止我得到的仍然是粗略的，我正在努力获得准确的输出。任何给我指明正确方向的建议都会被采纳。谢谢

编辑:如何减少H3 &P标签之间的间距？(我确实尝试了边距和填充，但没有任何效果)

​

​

链接到CodePen

HTML

<div class="blurb-container">
            <div class="blurb-icon">
                <svg width="99px" height="89px" viewBox="0 0 99 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g id="" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="Homepage---Desktop---First-Time-Visitor" transform="translate(-780.000000, -859.000000)">
                            <g id="Group-6" transform="translate(180.000000, 828.000000)">
                                <g id="home-icon-1-copy" transform="translate(600.000000, 31.000000)">
                                    <path d="M22.150176,37.2957114 L58.414244,16.7220133 C60.8963066,15.3138644 63.9757833,15.5045087 66.2652073,17.2080509 L95.4458727,38.9211515 C97.7262512,40.617963 98.7949315,43.4975614 98.1736475,46.2712415 L89.8690907,83.346375 C89.1324698,86.6349692 86.2132711,88.9726247 82.8431877,88.9726247 L30.3226487,88.9726247 C26.6804011,88.9726247 23.6118056,86.2526419 23.1746879,82.6367194 L18.5550504,44.4221834 C18.2065153,41.539034 19.6242293,38.7287571 22.150176,37.2957114 Z" id="Path" fill="#ADC4DA"></path>
                                    <path d="M68.593607,3.0866438 L94.8814573,28.4607721 C95.8351433,29.3813096 95.8620155,30.900668 94.941478,31.8543541 C94.489197,32.3229217 93.8659168,32.5875735 93.2146766,32.5875735 L88.608603,32.5874054 L88.6088522,55.3077597 C88.6088522,57.9587266 86.4598189,60.1077599 83.808852,60.1077599 L64.7380969,60.1074054 L64.7382432,44.0318665 L71.7133122,44.0322664 C72.3680935,44.0322664 72.9944465,43.7647377 73.4471807,43.2916941 C74.3636574,42.334105 74.3303291,40.8148745 73.37274,39.8983979 L73.37274,39.8983979 L50.1500969,17.6714054 L65.2600458,3.0866438 C66.1899666,2.18904546 67.6636861,2.18904546 68.593607,3.0866438 Z" id="Combined-Shape" stroke="#000000" stroke-width="4.80000019"></path>
                                    <path d="M39.9033277,7.86593791 L73.37274,39.8983979 C74.3303291,40.8148745 74.3636574,42.334105 73.4471807,43.2916941 C72.9944465,43.7647377 72.3680935,44.0322664 71.7133122,44.0322664 L64.7382432,44.0318665 L64.7389267,74.5510029 C64.7389267,77.2019698 62.5898934,79.3510031 59.9389265,79.3510031 L16.5488733,79.3510031 C13.8979064,79.3510031 11.7488731,77.2019698 11.7488731,74.5510029 L11.7482432,44.0318665 L4.77448753,44.0322664 C3.44900408,44.0322664 2.37448744,42.9577498 2.37448744,41.6322664 C2.37448744,40.9774851 2.64201622,40.3511321 3.11505975,39.8983979 L36.5844721,7.86593791 C37.5124905,6.97776243 38.9753093,6.97776243 39.9033277,7.86593791 Z" id="Combined-Shape-Copy-10" stroke="#000000" stroke-width="4.80000019"></path>
                                    <path d="M31.0829269,50.4861382 L45.404878,50.4861382 C46.7303614,50.4861382 47.804878,51.5606549 47.804878,52.8861383 L47.804878,79.3510031 L47.804878,79.3510031 L28.6829268,79.3510031 L28.6829268,52.8861383 C28.6829268,51.5606549 29.7574435,50.4861382 31.0829269,50.4861382 Z" id="Rectangle" stroke="#000000" stroke-width="4.80000019"></path>
                                </g>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
            <div class="blurb-content">
                <h3 class="blurb-title font-graphikmedium">Search properties</h3>
                <div class="blurb-label">Browse thousands of exclusive properties across the country.</div>
            </div>

CSS

.blurb-container {
display: flex;
margin-top: 0px;
width: 470px;
height: 98px;
}
.blurb-container * {
    box-sizing: border-box;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.blurb-icon {
    float: left;
    display: block;
    width: 99px;
    height: 89px;
}
.blurb-content {
    margin-left: 10px;
}
.blurb-title {
    font-weight: bold;
    font-size: 20px;
}
.blurb-label {
    margin-top: 0px;
    font-size: 18px;
}

.font-graphikmedium {
    font-family: "graphikmedium";
}

Answer 1

你不需要使用浮点数。你可以使用flexbox来处理整个事情。您还应该在h3下面使用paragraph元素，而不是div。

下面是HTML和CSS，我还链接了代码，这样您就可以使用它并查看实际的代码。https://codepen.io/bdlowery/pen/gOxqqKa

<div class="container">
  <picture>
    <svg height="100" width="100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
  </picture>
  <div class="text-content">
    <h3>Search properties</h3>
    <p>Browse thousands of exclusive properties across the country.</p>
  </div>
</div>

/* main idea to get what you want */
picture {
  max-width: 100px;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}


/* setup to get responsive svgs */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

picture {
  display: block;
}

svg {
  display: block;
  width: 100%;
  height: 100%;
}

Answer 2

将align-items: center；添加到等式中，并将h3下的div替换为p标记。这是沙箱，我在它周围放了一个红色边框，这样我就可以直观地看到发生了什么。代码与您的相同，我只是添加了align-items，并用p.div替换了div。https://codesandbox.io/s/small-shadow-fde90?file=/index.html

Answer 3

添加此css

     .text-content {
        display:flex;
        flex-direction:column;
        width: 335px;
        padding-left: 20px;
      }

      h3 {
        font-family: 'Montserrat', sans-serif;  font-size: 28px;
        margin-bottom:-20px;
      }

      p {
        color: #48525B;
        font-family: "Helvetica Neue",Helvtica,Arial,sans-serif;
        font-size: 20px;
        line-height: 28px;
        letter-spacing: 0;
      }