Плавающие элементы промежутки между, но без явного заполнения / поля - PullRequest
0 голосов
/ 28 октября 2009

У меня есть разметка ниже, которую нельзя изменить:

<div>Some data</div>
<span>More data</span>
<a>Link 1</a>
<a>Link 2</a>

Я хочу, чтобы он отображался так, чтобы div был полностью слева, а span - вправо, а ссылки 1 и 2 - справа от span.

Значение:

|<div>                   <span><a1><a2>|

Где | указывает край содержащего элемента.

Я могу получить следующее с плавающей точкой слева на div и плавающей точкой справа на других элементах, но вы можете видеть, что это не совсем то, что я хочу.

|<div>                   <a2><a1><span>|

Учитывая, что данные в диапазоне не всегда будут одинакового размера, фиксированное поле / отступ не будут работать.

Заранее спасибо за любые предложения.

1 Ответ

1 голос
/ 28 октября 2009

Это выглядит довольно близко:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
#outer { margin: 0 auto; width: 600px; background: yellow; overflow: hidden; text-align: right; }
#outer div { float: left; }
</style>
</head>
<body>
<div id="outer">
<div>Some data</div>
<span>More data</span>
<a>Link 1</a>
<a>Link 2</a>
</div>
</body>
</html>

Содержащий элемент является элементом уровня блока и, следовательно, настолько широким, насколько это необходимо. Установите выравнивание текста вправо, и встроенные элементы перейдут вправо в правильном порядке. Число с плавающей запятой, оставленное в первом элементе div, оставляет его слева.

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