div бок о бок с поворотом - PullRequest
Новая
       9

div бок о бок с поворотом

1 голос
/ 13 апреля 2009

Есть ли способ сделать div рядом друг с другом?

Я хочу макет 

------------
|Header div|
------------
|  |       |
|ul|iframe |
|  |       |

Но если iframe виден: скрытый / свернутый, <ul> займет все пространство 

------------
|Header div|
------------
|          |
|ul        |
|          |

Если я сделаю ul плавающим влево, то ul не будет иметь ширину: auto и если я сделаю позицию iframe: absolute, то ul всегда будет расширяться через весь сайт.

Все сайты, которые показывают это, используют ul с запасом. Но тогда у ul будет маржа, если там нет iframe

Ответы [ 3 ]

2 голосов
/ 13 апреля 2009

Если вы плаваете iframe справа от ul, то содержимое ul сможет заполнить всю ширину после его удаления (или стиль display установлен на none). Поскольку изменение стиля visibility не влияет на макет, изменение, которое ничего не даст. 

<div>Header</div>
<iframe src="http://www.google.com/" style="width:80%;float:right">
</iframe>
<ul>
  <li>Left column / main column</li>
  <li>A list</li>
  <li>of things</li>
</ul>
0 голосов
/ 13 апреля 2009 
I solved it. By setting overflow:auto on the ul element!


<!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>
    <title>Test</title>
</head>
<body>
<div>Header</div>
<iframe src="http://www.google.com/" style="width:20%;float:right">
</iframe>
<ul style="overflow: auto;">
  <li style="border: solid 1px Yellow;margin: 5px;">Left column / main column</li>
  <li style="border: solid 1px Yellow;margin: 5px;">A list</li>
  <li style="border: solid 1px Yellow;margin: 5px;">of things</li>
</ul>
</body>
</html>
0 голосов
/ 13 апреля 2009

Оберните iframe в div для обработки позиции iframe. Уменьшите отступ div до 0.

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

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

...