Question

有没有办法让div并排？

我想要布局

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

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

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

如果我让ul浮动，那么ul将没有宽度：auto 如果我创建iframe位置：绝对值ul将始终通过整个站点进行扩展。

显示此内容的所有网站都使用ul作为保证金。但是如果iframe不存在那么ul会有边距

Answer 1

如果您将iframe浮动到ul的右侧，那么ul的内容将能够在删除时填充整个宽度（或display 1}} style设置为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>

Answer 2

将iframe包装在div中以处理iframe位置。将div的填充减少到0。

Answer 3

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>

div并排扭曲

3 个答案: