即使屏幕尺寸很小，如何使 div 对齐成一行

Question

我知道有几个问题已经得到解答，但我无法将它们正确地应用到我的条件中。

我想做一些像这样的响应式 'information box'。

因为我用Hugo做网站，所以我做了'infobox.html'简码。

{{- $type := cond .IsNamedParams (.Get "type") (.Get 0) -}}
<div class="infobox">
    <div class="infobox-inner">
        {{- with (eq $type "info") -}}
        <div class="infobox-icon-box">
            <div class="infobox-icon">
                {{- $fname := print "fontawesome/info-circle.svg" -}}
                {{- $path := "<path" -}}
                {{- $fill := "<path fill=\"currentColor\"" -}}
                {{ replace (readFile $fname) $path $fill | safeHTML }}
            </div>
        </div>
        {{ end }}
        {{- with (eq $type "warn") -}}
        <div class="infobox-icon-box">
            <div class="infobox-icon">
                {{- $fname := print "fontawesome/exclamation-triangle.svg" -}}
                {{- $path := "<path" -}}
                {{- $fill := "<path fill=\"currentColor\"" -}}
                {{ replace (readFile $fname) $path $fill | safeHTML }}
            </div>
        </div>
        {{ end }}
        {{- with (eq $type "stop") -}}
        <div class="infobox-icon-box">
            <div class="infobox-icon">
                {{- $fname := print "fontawesome/hand-paper.svg" -}}
                {{- $path := "<path" -}}
                {{- $fill := "<path fill=\"currentColor\"" -}}
                {{ replace (readFile $fname) $path $fill | safeHTML }}
            </div>
        </div>
        {{ end }}
        <div class="infobox-text">
            <p>{{ .Inner | markdownify }}</p>
        </div>
    </div>
</div>

如您所见，它直接将 SVG 代码直接嵌入到结果 HTML 文件中。我相信这比在 <head>.

中加载 Font Awesome JS/CSS/Webfont 要快得多

有了上面的结构，我想写一些CSS东西。它应该做这些：

Make round-rectangle around infobox

Align infobox-icon-box and infobox-text in one line, even though screen size is small.
I tried with inline-block, inline-table etc. but when I resize screen, infobox-text went down under infobox-icon-box.

Resize infobox-icon-box according to screen size along with @media (max-width)

Align infobox-icon to middle(vertically) and center(of infobox-icon-box) and resize it.

Draw line between infobox-icon-box and infobox-text but not in full length.

我知道怎么做 1，但我不知道怎么做，尤其是 2。

使用 :before 会容易得多，但我不知道如何将它与原始 SVG 一起使用。

任何帮助将不胜感激，因为经过这么多次试验和错误，我的头麻木了......

Answer 1

可以使用flexboxCSS模态

.infobox {
    border: 2px solid #000;
    border-radius: 25px;
}

.infobox-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px 0;
}

.infobox-icon-box, .infobox-text {
    padding: 0 20px;
}

.infobox-icon-box {
    width: auto;
    flex: 0 0 auto;
}

.infobox-text {
    width: 100%;
    flex: 1 0 0%;
    border-left: 2px solid #000;
}

.infobox-icon {
    font-size: 3rem;
    color: #b35d5d;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<div class="infobox">
    <div class="infobox-inner">
        <div class="infobox-icon-box">
            <div class="infobox-icon">
                <i class="fas fa-info-circle"></i>
            </div>
        </div>
        <div class="infobox-text">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium enim omnis veniam consequuntur ducimus atque ipsam exercitationem corporis quo rem dicta, corrupti nesciunt rerum recusandae doloremque voluptatum odit earum? Exercitationem?
            </p>
        </div>
    </div>
</div>

即使屏幕尺寸很小，如何使 div 对齐成一行

How to make div align into one line even though screen size is small

html

css

hugo