div標簽的內聯顯示

Question

我試圖讓 2 個 div 標簽彼此內聯。 當我使用 display: inline-block 時，它的格式不正確。

我想要達到的目標查看圖片

代碼：

 .packaging_details { display: block; border: solid 1px #000; padding: 10px; width: 95%; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 30px; }.heading_texts { text-transform: uppercase; font-weight: bold; font-size: 14px; text-align: center; display:inline-block; }.Subheading2 { text-align: center; font-size: 14px; text-transform: uppercase; }.Subheading1 { font-weight: bold; text-transform: uppercase; text-align: right; display:inline-block; }

 <div class="packaging_details"> <div class="heading_texts">Company Name</div> <div class="Subheading1">LABEL</div> <div class="Subheading2"> <span class="logids">Name:</span> ### </div> </div>

Answer 1

您可以使用如下彈性框。 這樣做的唯一挑戰是將 Subheading2 居中對齊在標題文本下方，一種方法是將 flex-basis 設置為框寬度的 100% - Subheading1 元素的寬度。

此解決方案適用於您無權訪問或無法更改 html 結構但您可以更改 html 結構的情況，該結構可以使用 flex-box 輕松設置樣式。

 .packaging_details { display: flex; flex-wrap: wrap; border: solid 1px #000; padding: 10px; width: 95%; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 30px; }.heading_texts { flex: 1; text-transform: uppercase; font-weight: bold; font-size: 14px; text-align: center; }.Subheading2 { flex-basis: calc(100% - 55px); text-align: center; font-size: 14px; text-transform: uppercase; }.Subheading1 { font-weight: bold; text-transform: uppercase; text-align: right; }

 <div class="packaging_details"> <div class="heading_texts">Company Name</div> <div class="Subheading1">LABEL</div> <div class="Subheading2"> <span class="logids">Name:</span> ### </div> </div>

Answer 2

將應該看起來不同的零件包裝到單獨的容器中總是好的，這樣您就可以以不同的方式 position 它們。 您的問題很可能是，“heading_texts”、“Subheading1”和“Subheading2”位於同一層/同一 position 中，因此它們在父容器中的行為相似。

我可以為您提供一種解決方案：CSS Flex。

代碼：

 .packaging_details { display: block; border: solid 1px #000; padding: 10px; width: 95%; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 30px; }.heading_texts { text-transform: uppercase; font-weight: bold; font-size: 14px; text-align: end; width: 55%; }.Subheading2 { text-align: center; font-size: 14px; text-transform: uppercase; }.Subheading1 { font-weight: bold; text-transform: uppercase; text-align: end; width: 45%; }.inline-container{ display: flex; flex-direction: row; text-align: center; justify-content: center; }

 <div class="packaging_details"> <div class="inline-container"> <div class="heading_texts">Company Name</div> <div class="Subheading1">LABEL</div> </div> <div class="Subheading2"> <span class="logids">Name:</span> ### </div> </div>

您唯一需要注意的是，您通過在此處定義 2 個容器的寬度來 position 行的內容，因此，如果您希望徽標更加居中，則需要使用兩個容器的 with ，它們總是需要求和到 100% 的寬度！