CSS: проблема с тремя столбцами

Question

Как я могу изменить это:

<div style="border: solid 1px red; text-align: center">
    <div style="background-color: yellow; float: left">left</div>
    middle
    <div style="float:right; background-color: yellow">right</div>
</div>

Так что «право» находится на одной линии с «слева»?

Вот как выглядит мой плохой css:

left                 middle
                                            right

спасибо!

Answer 1

Если вы используете «float: right», сделайте это первым в строке:

<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», но строка была преждевременно закончена, чтобы освободить место для всплывающего сообщения, которое фактически происходит дальше вниз по странице ...

Стандарт CSS разрешает этот логический тупик, создавая поплавок в строке со встроенным текстом, прежде чем он ждет следующей строки.

(2) Потому что именно это Netscape сделал с <img float="right"> много-много лет назад.

Answer 2

Я получил то, что тебе нужно *:

<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% серьезен.

Answer 3

Работает без изменения порядка контента

<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% и сделать их репрезентативными для вашего дизайна, или даже сделать фиксированную ширину столбцов. По этой причине используйте идентификаторы вместо классов.

Answer 4

Генератор с 3 колонками

Answer 5

Вы говорите о "святом Граале", как в этой статье в отдельном списке

Answer 6

Сделайте middle a div, поместите его влево и укажите ширину для всех трех контейнеров. Кроме того, вы можете сделать окружение div overflow: auto, иначе оно рухнет само на себя.

Answer 7

Чтобы выполнить то, что вы пытаетесь сделать, вы должны поставить правильный столбец перед средним столбцом.

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

Поскольку правый столбец расположен относительно его контекста, который является строкой ниже среднего содержимого.

Answer 8

Попробуйте что-нибудь в этом роде:

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

Answer 9

Обновлен:

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

Answer 10

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