Question

我的网站需要一些帮助。我正在努力实现三张图片显示为＆＃34;显示：内联＆＃34;，这意味着彼此相邻而不是彼此相邻。

我无法找到错误，欢迎并提示。

＆＃13;

.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;
}

＆＃13;

<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>
		</div>
		<div id="trikot3">
		<img class="trikotset" src="img/traningsanzug.jpg">
		<button id='buy_button' type='button'><a href=>Jetzt Kaufen</button>
		</div>
		</section>

＆＃13;

Answer 1

图像位于容器＃trikot1，＃trikot2，＃trikot3中。你需要定义display：inline-block;对于那些容器：

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

Answer 2

你会发现浮子在这种情况下更可靠，因为我认为你不需要垂直定位。

编辑：记得包括clearfix！浮动元素类似于绝对元素，它们取自文档流程。

HTML / CSS - 显示：内联不起作用

2 个答案: