Question

在阅读Ethan Marcote的 A Book Apart 之后，我正在尝试编写更具“响应性”的代码。

我想出了一个我不确定如何解决的案例。在li元素中，我有四个不同的div s。第一个不能改变宽度或高度（我知道这不是响应，但图像大小必须保持相同）。其他三个div可以伸展，因为它们只是文本。

现在，我知道我可以将div设置为具有不同百分比的父宽度，这很好，除了div1是定义的像素宽度这一事实。这会抛出其他百分比的计算（浏览器宽度 - 对于不同的浏览器大小，77px将是不同的数字），那么我该怎么办？

我已经掀起了这个来帮助说明我的问题。

enter image description here

正如我所提到的，我意识到我可以使用JS在文档加载上设置容器div的宽度并调整大小，但这似乎不太好。

感谢您的帮助：）

Answer 1

也许表格可以帮助

<!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>

Answer 2

@garthen;据我所知，您的问题是您希望one div拥有fixed width＆amp;其他人有dynamic widths。我通过改变div的顺序来做到这一点

CSS：

li {overflow:hidden}
            li div {border: 1px solid blue;}
            .div1 { width:65px;float:left; background:red;}
            .div2 {overflow:hidden; background:yellow;}
            .div3 { width: 10%; float:right; background:green;}
            .div4 { width: 30% ;float:right; background:pink;}

HTML：

<ul>
            <li>
                <div class="div1">1</div>
                <div class="div4">4</div>
                <div class="div3">3</div>
                <div class="div2">2</div>
            </li>
            <li>
                <div class="div1">1</div>
                <div class="div4">4</div>
                <div class="div3">3</div>
                <div class="div2">2</div>
            </li>
        </ul>

可能是你想要的＆amp;它也适用于IE。如果你想给你的第3和第3第4 div fixed width也适用。

查看演示以获取更多http://jsfiddle.net/sandeep/4RPFa/67/

除一个元素外的所有动态宽度

2 个答案: