Question

我有三个div：

<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>

我希望他们的定位如下：

A     C
B

C应始终位于容器的右上角。如何在CSS中仅使用三个div并按此顺序进行此操作？

我尝试了float，display和clear属性的许多不同组合无济于事。

Answer 1

这应该有用......如果没有，请发布您所遇问题的截图。

谢谢！

修改

初步反应存在缺陷。我已修改到下面 - 将有一些浏览器限制，但有一些解决办法来获得正确的行为：

div { display:block; width:49%; float:left; clear:left; } div.C { display:inline-block; float:none; }

Answer 2

<html>
<body>
<style type="text/css">
.a {
    float:left;
}

.b {
    clear:both;
}

.c {
    float: left;
    margin-left: 10px;
}

</style>
<div class="a">A</div>
<div class="c">C</div>
<div class="b">B</div>

</body>
</html>

Answer 3

它不能由float完成，因为它没有有效的流程。

试试这个：

<style type="text/css">
.A {
  background: green;
}

.B {
  background: yellow;
  position: relative;
}

.C {
  background: red;
  position: absolute;
  top: 0;
  right: 0;
}

.container {
  position: relative;
}

</style>




<div class="container">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
</div>

示例：http://jsfiddle.net/YGw3E/

Answer 4

如果inrbob的示例不适合您，则float的替代方法可能是以下HTML;

<div id="container">
    <div class="A">A</div>
    <div class="B">B</div>
    <div class="C">C</div>
</div><!-- /container -->

使用此CSS;

#container {
    position: relative;
}

div.C {
    position: absolute;
    top: 0;
    right: 0;
}

如果有帮助，请告诉我。

Answer 5

您是否尝试过a，b向左，c向右？另外，为元素设置宽度应该会有所帮助。发布一些标记，以便我们知道您尝试了什么以及如何解决它。非常难以猜测这些东西。

Answer 6

重新排列它们并让A浮动到右边会更简单：http://jsfiddle.net/78NnN/

有三个div，如何让一个浮动到右边？

6 个答案: