html - div 并排旋转

Question

有没有办法并排制作div？

我要布局

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

但如果 iframe 可见:隐藏/折叠 <ul>将占用所有空间

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

如果我让 ul 向左浮动，那么 ul 将没有 width:auto如果我将 iframe 设置为 position:absolute，ul 将始终扩展到整个站点。

所有显示此内容的网站都使用 ul 并留有边距。但是如果 iframe 不存在，ul 将有边距

Answer 1

如果将 iframe float 到 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>