С тремя делами, как сделать один плавать вправо? - PullRequest
Новая
       14

С тремя делами, как сделать один плавать вправо?

1 голос
/ 07 сентября 2010

У меня есть три деления: 

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

2 голосов
/ 07 сентября 2010

Это должно сработать ... если нет, пожалуйста, опубликуйте скриншот вашей проблемы.

Спасибо!

РЕДАКТИРОВАТЬ

Начальный ответбыл ущербен.Я изменил нижеприведенное - будут некоторые ограничения браузера, но есть обходные пути для получения правильного поведения: 

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

div.C {
    display:inline-block;
    float:none;
    }
1 голос
/ 07 сентября 2010

Если пример 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;
}

Дайте мне знать, если этопомогает.

1 голос
/ 07 сентября 2010

это не может быть сделано с помощью 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/

1 голос
/ 07 сентября 2010 
<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>
0 голосов
/ 07 сентября 2010

Было бы проще переставить их и заставить A плавать вправо: http://jsfiddle.net/78NnN/

0 голосов
/ 07 сентября 2010

Вы пробовали плавать a, b влево и c вправо?Также должна помочь установка ширины для ваших элементов.Разместите некоторую разметку, чтобы мы знали, что вы пробовали и как это исправить.очень трудно угадывать эти вещи.

...