CSS: проблема Расположения на Три столбца
Вы можете сделать это так:
<EditText
android:id="@+id/editText5"
android:layout_width="286dp"
android:layout_height="45dp"
android:layout_marginTop="12dp"
android:background="#33FFFFFF"
android:ems="10"
android:hint="Username"
android:padding="10dp"
android:inputType="textPersonName" />
10 ответов
Если Вы используете ‘плавание: право’, делают он первая вещь на строке:
<div style="border: solid 1px red; text-align: center">
<div style="float:right; background-color: yellow">right</div>
<div style="background-color: yellow; float: left">left</div>
middle
</div>
Иначе это всегда попадает в следующую текстовую строку.
но почему!!!!!
(1) Поскольку, после того как Вы начали помещать статический текст на строку, у Вас есть неопределенная ширина для установки пущенному в ход элементу в. Скажите, что Вы записали:
abc abc abc <div style="float: left">xyz xyz</div> abc abc abc
Теперь предположите, что Вы начинаете изменять размер того окна вниз так, чтобы “abc abc abc” просто соответствовала на первой строке. Теперь Вы встречаете плавание и пытаетесь включать его в строку, Вы идете. Но это не соответствует: для установки ему на у Вас должна была бы быть “abc xyz xyz” на строке, повторно текущий остающаяся “abc” к следующей строке. Но! Теперь Вы переместили точку вставки плавания вниз строка, таким образом, плавание имеет к выпадающему строку также. Но! Теперь первая строка не перенесена правильно, потому что существует комната для трех “abc” s, но строка была закончена преждевременно для освобождения дорогу для плавания, которое на самом деле происходит далее ниже на страницу...
Стандарт CSS решает этот логический тупик, заставляя плавание на строке со встроенным текстом перед ним ожидать следующей строки.
(2) Поскольку это - то, с чем сделал Netscape <img float="right"> многие, много лет назад.
Я добрался что Вы need*:
<table style='border: 1px solid red; width: 100%; border-collapse: collapse;'>
<tr>
<td style='background-color: yellow; width: 25%;'>left</td>
<td style='text-align: center;'>middle</td>
<td style='background-color: yellow; width: 25%; text-align: right;'>right</td>
</tr>
</table>
Благодарите меня позже!
* отказ от ответственности: Я только на 95% серьезен.
Это работает, не перестраивая порядок содержания
<style type="text/css">
.column
{
float: left;
width:33.3%;
}
#container
{
text-align: center;
width:100%;
}
.clearfix
{
display: inline-block;
}
</style>
<div id="container" class="clearfix">
<div class="column">left</div>
<div class="column">middle</div>
<div class="column">right</div>
</div>
Можно также отбросить 33% и сделать их представителем дизайна или даже сделать закрепленную ширину на столбцах. В той причине используйте идентификаторы вместо классов.
Сделать middle a div, пустите в ход его налево и укажите ширины для всех трех контейнеров. Кроме того, Вы могли бы сделать окружение div overflow: auto, еще это выйдет из строя на себе.
Вы говорите о "Святом Граале" как в этом статья List Apart
"середина" должна быть в собственном отделении или может отбросить Ваш дисплей
Для выполнения, что Вы пытаетесь сделать необходимо поместить правый столбец перед средним столбцом.
<div style="border: solid 1px red; text-align: center">
<div style="background-color: yellow; float: left">left</div>
<div style="float:right; background-color: yellow">right</div>
middle
</div>
Поскольку правый столбец расположен относительно в свой контекст, который является строкой ниже среднего содержания.
Обновленный:
<div style="border: solid 1px red; text-align: center">
<div style="background-color: yellow; float: left">left</div>
<div style="float:right" background-color: yellow">right</div>
<div style="float:none">middle</div>
</div>
Что-то вроде этого попытки:
<div style="border: solid 1px red; text-align: centerl width:100px">
<div style="background-color: yellow; float: left; width:30px">left</div>
<div style="background-color: yellow; float: left; width:30px">middle</div>
<div style="background-color: yellow; float: left; width:30px">right</div>
</div>