使用 CSS 进行 HTML 定位

Question

我在 HTML 定位方面遇到了问题。我胡乱了一会儿，这是我得到的最远的。这是 HTML 和 CSS

.group:after {
  content: "";
  display: block;
  clear: both;
}
article {
  width: 400px;
  border: 1px solid black;
}
#tip,
#title {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
#tip {
  background: yellow;
}
#title {
  background: orange;
}
#box_1 {
  float: left;
  width: 60px;
  height: 60px;
  background: pink;
}
#box_2 {
  float: right;
  width: 60px;
  height: 120px;
  background: blue;
}
#box_3 {
  float: left;
  clear: left;
  width: 60px;
  height: 60px;
  background: green;
}

<article class="group">
  <h2 id="tip">tip</h2>
  <h2 id="title">title</h2>
  <div id="box_1"></div>
  <div id="box_3"></div>
  <div id="box_2"></div>
</article>

我希望我的 #box_3 位于 #box_1 的正下方，我通过给 #box_3 clear: left; 让它工作。但我也希望我的 #box_2 呈现在右侧 #title 的正下方。

需要注意的是，在我的 HTML 代码中 #box_3 出现在 #box_2 之前，并且 #box_1 的高度未固定为只是 60px。这是我的 jsfiddle。

http://jsfiddle.net/92um5o2c/2/

Answer 1

如果您对 html 代码进行了一些调整，那么这不是问题。您应该先放置 #box1，然后放置 #box2，然后放置 #box3

这是例子

.group:after {
  content: "";
  display: block;
  clear: both;
}

article {
    width: 400px;  
    border: 1px solid black;
}

#tip, #title{
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

#tip {
    background: yellow;
}

#title {
    background: orange;
}

#box_1 { 
	float: left;
	width: 60px;
	height: 60px;
	background: pink;
}
#box_2 { 
	float: right;
	width: 60px;
	height: 120px;
	background: blue;
}
#box_3 { 
	float: left;
    clear: left;
	width: 60px;
	height: 60px;
	background: green;
}

<article class="group">
    <h2 id="tip">tip</h2>
    <h2 id="title">title</h2>
    <div id="box_1"></div>
   
    <div id="box_2"></div>
    <div id="box_3"></div>
 </article>