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

回答

相关问题