如何向左浮动两个元素并向右浮动第三个元素，第三个元素的顶部与第一个元素的顶部内联？
item 1 item 3
item 2
我尝试将项目1和项目2向左，项目3向右，但是项目3的顶部仅在项目2的顶部，如下所示：
item 1
item 2 item 3
HTML：
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
CSS：
.item1 {
float:left;
}
.item2 {
float:left;
}
.item3 {
float:right;
}
答案 0 :(得分：2)
使用清除第二个元素并在第三个元素之后放置第二个.item2
.item1 {
float:left;
}
.item2 {
float:left;
clear: both;
}
.item3 {
float:right;
}<div class="item1">1</div>
<div class="item3">3</div>
<div class="item2">2</div>
答案 1 :(得分：0)
使用此代码
.main {
float:left;
}
.item3 {
float:right;
}<html>
<head>
</head>
<body>
<div class="main">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
</div>
<div class="item3">Item 3</div>
</body>
</html>
答案 2 :(得分：-1)
这是一个简单的解决方案......只需在第1项之后使用和clearfix属性就像这个
.item1 {
float:left;
}
.item2 {
float:left;
}
.item3 {
float:right;
}
div{
width:100px;
height:20px;
display:inline-block;
background:grey;
}
.clearfix{
display:block;
background:transparent;
clear:right;
}<div class="item1">A</div>
<div class="clearfix"></div>
<div class="item2">B</div>
<div class="item3">C</div>
`
答案 3 :(得分：-2)
注意：原始问题没有说清楚任何内容。
如果没有任何间隙浮动项目，它应立即生效，请参阅下面的示例。
#one {
width: 150px;
height: 120px;
background: #fc0;
float: left;
}
#two {
width: 120px;
height: 150px;
background: #09f;
float: left;
}
#three {
width: 100px;
height: 130px;
background: #3c6;
float: right;
}<div id="container">
<div id="one">#1</div>
<div id="two">#2</div>
<div id="three">#3</div>
</div>
如果你确实希望元素＃2 低于＃1而＃3仍然在右边与＃1对齐，你应该切换＃2和＃3的位置并将clear: both;应用于＃2（请参阅Saravanan I的回答）或在＃1和＃2周围添加包裹元素（请参阅bhv的评论）。
作为替代方案，如果无法进行标记更改，您可以使用flexbox而不是浮点数，它允许您订购元素，请参阅下面的示例。
#container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#container > div {
flex-basis: 34%;
}
#one {
background: #fc0;
order: 1;
}
#two {
background: #09f;
order: 3;
}
#three {
background: #3c6;
order: 2;
}<div id="container">
<div id="one">#1<br>some short text</div>
<div id="two">#2<br>other text, should be directly below #1</div>
<div id="three">#3<br>Oh boy,<br>this is much longer.<br>Will it break the layout?<br>#2 is supposed to be<br>right next to #1.</div>
</div>