在阅读了 Ethan Marcote 的 A Book Apart 之后，我正在尝试编写更“响应式”的代码。
我想出了一个我不确定如何解决的案例。在 li元素，我有四个不同的 div秒。第一个不能改变宽度或高度(我知道这不是响应式的，但图像大小必须在其中保持不变)。其他三个div s 可以拉伸(stretch)，因为它们只是文本。
现在，我知道我可以设置 div s 具有其父级宽度的不同百分比，这很好，除了 div1 必须是定义的像素宽度这一事实。这抛出了其他百分比的计算(浏览器宽度 - 77px 将是不同浏览器大小的不同数字)，那么我该怎么办？
我想出了这个来帮助说明我的问题。
正如我提到的，我意识到我可以使用 JS 在文档加载和调整大小时使用 JS 来设置容器 div 的宽度，但这似乎不太好。
感谢您的帮助:)
最佳答案
也许 table 上的东西能帮上忙
<!DOCTYPE html>
<html>
<head>
<style>
li { display: table; clear: both; width: 100% }
li div { display: table-cell; border: 1px solid blue; height: 1em }
.div1 { min-width: 65px; max-width: 65px }
.div2 { width: 60% }
.div3 { width: 10% }
.div4 { width: 30% }
</style>
</head>
<body>
<ul>
<li>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</li>
<li>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</li>
</ul>
</body>
</html>
关于css - 除一个元素外的所有元素的动态宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7303631/