我正在嘗試使用字體很棒的圖示、標題和帶有 HTML 和 CSS 的段落文本為產品描述創建一個漂亮的布局。
這將用于 WooCommerce 單個產品頁面，所以我試圖避免行內樣式，以便我可以將 HTML 代碼放在 WordPress 所見即所得編輯器中，并將 CSS 放在樣式表中。
我已經創建了一個我正在嘗試創建的布局的可視化示例，但我不確定實作它的實踐是什么。
下面是我已經開始的代碼，任何關于采取什么方向的建議將不勝感激。表列是否是錯誤的起點，也許在具有簡單填充的串列中會更好？
謝謝你。
HTML
<div class="wrapper">
<div class="icon">
<i class="fa fa-quote-left fa-4x fa-border" style=""></i>
</div>
<div class="text">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.<p/>
</div>
</div>
CSS
.wrapper (
display: table-row;
)
.icon (
display: table-cell;
vertical-align: top;
)
.text (
display: table-cell;
vertical-align: top;
)
uj5u.com熱心網友回復：
Flexbox 可以做到這一點。
.wrapper {
display: flex;
align-items: flex-start;
}
* {
margin: 0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<div class="wrapper">
<div class="icon">
<i class="fa fa-quote-left fa-border" style=""></i>
</div>
<div class="text">
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
<p/>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/348960.html
上一篇：在按鈕之間添加一條垂直線