html - CSS 布局查询

Question

我正在尝试在页面上定位几个元素。

<div id='select'></div> // red div
<h5>Subheader</h5>
<div id='image'>Example of a DIV element with a background image:</div>  // green div

https://jsfiddle.net/xqt4aosx/2/

第一个“红色 div”现在位于我想要的位置，但是当我尝试定位子标题和“绿色 div”时，它们似乎位于页面下方。

理想情况下，红色 div 底部和子标题之间不应有这样的间隙。子标题和绿色 div 之间的间隙很好。

关于我如何解决这个问题的任何想法。

谢谢

Answer 1

额外的空间由 top: -90px; 在你的 jsfiddle 中创建。

我修改了您的红框样式并将表单向左浮动，我认为这会为您提供您想要的结果。

#form{
  float:left;
}

#select {
  background-repeat: no-repeat;
  text-align: center;
  border: 2px solid #d90036;
  width: 176px;
  height: 175px;
  margin-left:160px;
}

然后可以像往常一样在 h5 标签上使用 margin/padding 来改变子标题的间距