Какой кросс-браузерный совместимый способ выровнять по правому краю дочерние элементы div и заставить родительский элемент div получить его ширину от дочерних элементов? - PullRequest
Новая
       6

Какой кросс-браузерный совместимый способ выровнять по правому краю дочерние элементы div и заставить родительский элемент div получить его ширину от дочерних элементов?

3 голосов
/ 19 января 2010

У меня есть несколько дочерних <div> переменных ширины, которые я хочу выровнять по правому краю в родительском элементе. Я также хочу, чтобы родитель <div> был не шире, чем нужно, чтобы содержать детей. (Я не знаю заранее, насколько широкими будут дети - они будут содержать динамически генерируемый контент.)

Вот пример, который работает правильно в IE 8.0, но не в Firefox 3.5 (дочерние <div> не выровнены по правому краю): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
      #parentDiv{float:left; text-align:right; background-color: gray;}
      .childDiv{clear:both; border: 1px solid black; background-color: white;}
    </style>
  </head>
  <body>
    <div id="parentDiv"> 
      <div class="childDiv" style="width: 25px">&nbsp;</div>
      <div class="childDiv" style="width: 50px">&nbsp;</div>
      <div class="childDiv" style="width: 100px">&nbsp;</div>
    </div>
  </body>
</html>

Если я добавлю float:right в CSS childDiv, он будет работать в Firefox 3.5, но не в IE 8.0 (ширина parentDiv больше не определяется из ширины его дочерних элементов).

Есть ли способ получить желаемое поведение во всех основных браузерах?

ОБНОВЛЕНИЕ: Очевидно, что добавление float: right к дочерним элементам div вызывает ошибку в IE, только когда я размещаю страницу на своем локальном хосте IIS. (Что я и делал изначально.) Возможно, это проблема с некоторыми настройками IIS? Я использую IIS 6.0

ОБНОВЛЕНИЕ № 2: Получается, что IIS 6 заставлял страницу загружаться в режиме стандартов IE7. Таким образом, приведенный выше код (с добавлением float:right к дочерним элементам div) работает для IE8 и Firefox, но, очевидно, не для IE7.

Я полагаю, что возникает вопрос: существует ли простой способ заставить это работать в IE7? (Я имею в виду не только использование условного комментария или CSS-хака для загрузки другой таблицы стилей в IE7.)

Ответы [ 4 ]

2 голосов
/ 20 января 2010

Отредактировано 21 января 2010 г. @ 21:00 MST: Вам необходимо переместить родительский элемент div вправо. Первоначально я также указывал право на дочерние элементы, но это вызвало проблемы в IE7. Если у вас есть Firebug, посмотрите на эту тестовую страницу , которая дает результат, к которому вы стремитесь. Я тестировал в Firefox 3.5, IE7, IE8, Chrome и Safari 4.

Вот соответствующие CSS и HTML (я добавил немного полей / отступов и цветов фона, чтобы вы могли легче увидеть эффект): 

   <style type="text/css">
      #parent {
         margin:0;
         background:#ccc;
         float:right;
         padding:20px;
      }
      #parent div {
         background:#eee;
         margin:0 0 20px;
         text-align:right;
      }
   </style>

    ...

   <div id="parent">
      <div>Nulla facilisi. Suspendisse potenti. Sed sed euismod tortor.</div>
      <div>Lorem ipsum, pharetra nec justo. In dapibus neque a libero cursus a laoreet nunc luctus.</div>
      <div>Lorem ipsum dolor sit amdolor.</div>
   </div>

Мое предположение относительно того, почему оригинал не работал, заключается в том, что в IE7 есть ряд документированных ошибок ( см. Здесь для списка, который включает ссылки на несколько ошибок float). Если вы поместите родительский и дочерний элементы вправо, вы получите желаемые результаты в IE8 и других современных браузерах, но в IE7 ширина родительского элемента не будет уменьшаться до ширины самого широкого дочернего элемента (введите вредную ошибку).

IE7 ведет себя, как и ожидалось, если переместить родительский и дочерний элементы в left , однако (но это не то, что вы хотели).

0 голосов
/ 20 января 2010

Вам нужно position: relative; для родителя, и самое главное, вам нужно очистить эти числа .

0 голосов
/ 20 января 2010

Попробуйте добавить position: relative; к родителю и float: right; к детям

0 голосов
/ 19 января 2010

Вы пытались переместить все дочерние элементы div вправо, а затем добавить отдельный нижний колонтитул с шириной:% 100 и очистить: оба?Я полагаю, что это заставит IE правильно масштабировать родительский элемент, так как внутри него будет элемент, который имеет правильную ширину, а также в потоке документа (перемещенные объекты удаляются из потока.) Вам может потребоваться display: inline на clear asхорошо.

...