With three divs, how to make one float to the right?
I have three divs:
<div class="A">A</div>
<div class=开发者_StackOverflow"B">B</div>
<div class="C">C</div>
I want them to be positioned like this:
A C
B
Where C should always be in the top right corner of the container they're in. How do I go about this in CSS using only the three divs and in that order?
I've tried a lot of different combinations of the float, display and clear properties to no avail.
This should work... if not please post a screenshot of the issue you have.
Thanks!
EDIT
Initial response was flawed. I have amended to the below - there will be some browser restrictions but there are work-arounds to get the correct behaviour:
div {
display:block;
width:49%;
float:left;
clear:left;
}
div.C {
display:inline-block;
float:none;
}
it can't be done by float, because it's no valid flow.
Try this:
<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>
Example: http://jsfiddle.net/YGw3E/
If inrbob's example doesn't work for you, an alternative to float might be the following HTML;
<div id="container">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</div><!-- /container -->
With this CSS;
#container {
position: relative;
}
div.C {
position: absolute;
top: 0;
right: 0;
}
Let me know if that helps.
<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>
Have you tried floating a,b to the left and c to the right? Also setting widths for your elements should help. Post some markup so we know what you have tried and how to fix it. very hard guessing these stuff.
It would be simpler to rearrange them and have A float to the right: http://jsfiddle.net/78NnN/
加载中,请稍侯......
精彩评论