HTML/CSS - 顯示：inline not working

我需要一些幫助，我的網站。我努力實現三張照片顯示爲「顯示：內聯」，這意味着彼此相鄰而不是彼此之下。HTML/CSS - 顯示：inline not working

我找不到我的錯誤，並歡迎和暗示。

.trikot { 
 
    max-width: 1050px; 
 
    height: 200px; 
 
    border: 2px solid rgba(255, 255, 255, 0.9); 
 
    border-radius: 10px; 
 
    margin-left: 10px; 
 
    margin-top: 10px; 
 
    display: inline; 
 
} 
 
.trikotset { 
 
    margin-top: 15px; 
 
    margin-left: 10px; 
 
    height: 150px; 
 
} 
 
#buy_button { 
 
    background-color: #9c1737; 
 
    width: 100px; 
 
    display: block; 
 
    margin-left: 35px; 
 
}

<section class="trikot"> 
 
    <div id="trikot1"> 
 
    <img class="trikotset" src="img/trikot.jpg"> 
 
    <button id='buy_button' type='button'>Jetzt Kaufen</button> 
 
    </div> 
 
    <div id="trikot2"> 
 
    <img class="trikotset" src="img/hose.jpg"> 
 
    <button id='buy_button' type='button'><a href=>Jetzt Kaufen</button> 
 
\t \t </div> 
 
\t \t <div id="trikot3"> 
 
\t \t <img class="trikotset" src="img/traningsanzug.jpg"> 
 
\t \t <button id='buy_button' type='button'><a href=>Jetzt Kaufen</button> 
 
\t \t </div> 
 
\t \t </section> \t

來源

2016-12-07 M.Blank

使其顯示：內嵌塊 – Geeky

對於初學者，您省略了兩次「」。我用你的代碼編輯了你的問題，並把它放在一個片段中。 – j08691

感謝您的回覆。我已經嘗試顯示：inline-block;它不工作。謝謝@ J08691。 –

你會發現漂浮於這種類型的情況更可靠，因爲我沒有看到你需要垂直定位。

編輯：記得包括clearfix！浮動元素與絕對類似，它們來自文檔流。

來源

2016-12-07 22:43:21 Erklat

它正在使用浮球，非常感謝。 –

的圖像是容器＃trikot1，＃trikot2，＃trikot3內部。你需要定義display：inline-block;這些容器：

#trikot1, #trikot2, #trikot3 { 
    display: inline-block; 
}

來源

2016-12-07 22:35:43

HTML/CSS - 顯示：inline not working

回答

相關問題