代码之家 › 专栏 › 技术社区 › Adam Lindberg

对于三个div,如何使一个div向右浮动?

css-float positioning layout css html

Adam Lindberg · 技术社区 · 14 年前

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

我希望他们的位置是这样的:

A     C
B

在哪里? C 应该总是在容器的右上角。如何在CSS中只使用三个div并按此顺序进行?

我试过很多不同的组合 float , display clear 属性无效。

6 回复 | 直到 12 年前

sled 14 年前

它不能通过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/

Stuart Burrows 14 年前

这应该管用。。。如果没有请张贴一个截图的问题,你有。

谢谢!

编辑

最初的反应是有缺陷的。我已经对以下内容进行了修改-将有一些浏览器限制,但要获得正确的行为还有一些解决方法:

div {
    display:block;
    width:49%;
    float:left;   
    clear:left;
    }

div.C {
    display:inline-block;
    float:none;
    }

Jo Sprague 14 年前

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

如果有帮助请告诉我。

Gary Green 14 年前

<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>

Iznogood 14 年前

Nikita Rybak 14 年前

将它们重新排列并 A 向右浮动: http://jsfiddle.net/78NnN/

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前