對不起，我什至不知道如何問我的問題，但基本上，我需要標題位于段落上方，徽標位于左側。
#container {
display: flex;
align-items: center;
}
#container p {
margin-left: 1em;
}
#container h4 {}
}<div id='container'>
<img src="http://placekitten.com/100/100" alt="image" width="50" height="50">
<h4>
Placeholder Title
</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, arcu in tempus tempor, odio velit vehicula erat, sed facilisis sem enim at sapien. </p>
</div>uj5u.com熱心網友回復：
我有你的疑問。基本上 flex 適用于直接子代。所以根據你的圖片參考，有兩列，所以你必須用一個 div 包裝 h4 和 p 標簽，這使得容器有 2 個孩子，你會得到想要的結果。
uj5u.com熱心網友回復：
它不適用于 Flexbox，因為您無法在同一容器中的元素之后更改 flex-direction。由于您需要使用標記在同一個容器中控制 2 個方向，因此您必須使用CSS-Grid
#container {
display: grid;
grid-template-columns: min-content auto;
}
#container img {
grid-row: 1 / -1;
}
#container :not(img) {
grid-column: 2 / -1;
}<div id='container'>
<img src="http://placekitten.com/100/100" alt="image" width="50" height="50">
<h4>
Placeholder Title
</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, arcu in tempus tempor, odio velit vehicula erat, sed facilisis sem enim at sapien. </p>
</div>uj5u.com熱心網友回復：
第一種選擇
你好！您是否嘗試過使用屬性浮動？因為在此屬性中使用值“left”會使影像轉到檔案的左側。
但是，如果影像元素位于顯示為 flex 的父元素內，則它不起作用，因此您必須將影像放在容器之前。這是一個代碼片段：
#container {
display: flex;
align-items: center;
flex-direction: column;
}
#container p {
margin-left: 1em;
}
#cat {
float: left;
}<img id="cat" src="http://placekitten.com/100/100" alt="image" width="50" height="50">
<div id='container'>
<h4>Placeholder Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, arcu in tempus tempor, odio velit vehicula erat, sed facilisis sem enim at sapien. </p>
</div>第二種選擇
您還可以使用包含段落和影像的分隔 div，并將其顯示設定為 flex。
#container {
display: flex;
align-items: center;
flex-direction: column;
}
#container p {
margin-left: 1em;
}
#container div {
display: flex;
}<div id='container'>
<h4>Placeholder Title</h4>
<div>
<img id="cat" src="http://placekitten.com/100/100" alt="image" width="50" height="50">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, arcu in tempus tempor, odio velit vehicula erat, sed facilisis sem enim at sapien. </p>
</div>
</div>你來了！我希望這有幫助！
uj5u.com熱心網友回復：
如果您無權訪問 HTML，因此無法創建另一個容器，@tacoshys 的答案是正確的 - 如果沒有grid. Flexbox 用于一維布局。但是，您可以將文本包裝在另一個container中，然后使用flex布局來控制text-containerand img。
/* Border box and resetting margin, specifically for p-element */
* {
box-sizing: border-box;
margin: 0;
}
/* Default direction is row */
#container {
display: flex;
}
/* Setting direction to column */
.text-container {
display: flex;
flex-direction: column;
margin-left: 1em;
}<div id='container'>
<img src="http://placekitten.com/100/100" alt="image" width="50" height="50">
<div class="text-container">
<h4>
Placeholder Title
</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, arcu in tempus tempor, odio velit vehicula erat, sed facilisis sem enim at sapien. </p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/479684.html