Плавающая проблема ширины DIV в CSS - PullRequest
Новая
       7

Плавающая проблема ширины DIV в CSS

2 голосов
/ 02 марта 2011

У меня есть одна проблема с плавающими div. Я хотел бы установить для всех div'ов значение float: left и отобразить их все в одной строке на экране: 

Example
A - div a "style=float:left"
B - div b "style=float:left"
C - div c "style=float:left"

As appeared on screen:

A  |  B  |   C


However, when contents in C is overflowing, it end up in the next row like this

A   |   B
C

Могу ли я узнать, как сделать div C обратно в ту же строку, что и div A и B, независимо от того, насколько велик контент в C? Я знаю, что C находится в следующей строке, потому что ширина шире, чем может содержать предыдущая строка. Как сделать так, чтобы div C отображался в одной строке с A и B, независимо от того, насколько велик контент в C? В моем случае у div C нет фиксированной ширины, и я не собираюсь устанавливать максимальную ширину. Но А и В имеют фиксированную ширину.

Спасибо.

Ответы [ 3 ]

2 голосов
/ 02 марта 2011

Я думаю, я бы использовал для этого абсолютное позиционирование. 

<html>
<head>
<style type="text/css">
div.outer { position: relative; width: 100%; }
div.inner { position: absolute; }
div.a { left: 0; }
div.b { left: 1em; }
div.c { left: 2em; }
}
</style>
</head>
<body>
<div class="outer">
<div class="inner a">A</div>
<div class="inner b">B</div>
<div class="inner c">C Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Duis lacinia elit sed sapien sollicitudin vitae laoreet lectus hendrerit. 
Donec id lorem mi, vitae feugiat purus. Phasellus cursus, est et sodales 
ornare, lorem magna convallis felis, ac pharetra sem nisl vitae massa. 
Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Morbi at lectus ac nulla vestibulum tincidunt 
quis vel neque. Pellentesque ultricies, ipsum nec congue placerat, tortor 
enim tempor risus, viverra rutrum eros arcu non orci. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec 
ligula neque, lacinia in sodales vitae, aliquet at diam. Ut sed semper 
ligula.</div>
</div>
</body>
</html>

..., которое выдает такой результат: Image of output

2 голосов
/ 02 марта 2011

Удалите объявление float: left из div C и добавьте объявление margin-left: (width of A + width of B) px. Смотрите скрипку для демонстрации.

2 голосов
/ 02 марта 2011

Вы не можете сделать это, просто используя float, если C не имеет фиксированного значения. Однако вы должны быть в состоянии выполнить то, что вы хотите, не устанавливая float на C, и оставляя ему поле слева, равное ширине A + B.

Если оставить для C левое поле, оно появится справа от A и B (так как там есть место для него), и, поскольку вы не назначаете ему ширину, оно будет занимать оставшееся пространство. В качестве бонуса, если C вырастет выше, чем A & B, он не будет перемещать контент ниже других полей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...