丢失元素的位置与css [英] Losing elements' positions with css

问题描述

我需要做这样的smth：

I need to do smth like this:

左框应具有静态宽度，右边框的大小调整为完整的浏览器宽度。
盒子的高度也应该可调整大小。

Left box should have static width and right one resizes to full browser width. Height of the boxes also should be resizeable.

所以就在这里

<div class="page-wrapper">
    <div class="search-wrapper">
    </div>
    <div class="content-wrapper">
        <div class="leftPage">
        </div>
        <div class="rightPage">
        </div>
    </div>
</div>

问题是：

银左页。我想它有静态宽度。让我们说454px。
我希望右页（黑色的一个）动态调整大小到屏幕。

I have silver left page. I want it to have static width. Lets say 454px. And I want right page (black one) to be dynamically resized to screen.

宽度为20％/ 80％的变体对我来说是不好的。
只有CSS可能吗？
我有很好的答案与jquery / js，但仍然有趣，如果它可以做CSS只有）

Variant with width 20%/80% is not good for me. Is it possible with CSS only? I got good answers with jquery/js but still interesting if it can be done with CSS only)

对不起的麻烦）

推荐答案

Javascript / jQuery

静态和右列是动态的，你将需要Javascript或CSS预处理器，如SASS。这是旧版浏览器支持的唯一真正的解决方案。

If you want left column to be static and the right column to be dynamic, you will need Javascript or a CSS preprocessor like SASS. That's the only real solution that is supported by older browsers.

// parent width - leftpage width = remainings
$('div.rightPage').width(
    $('div.rightPage').parent().width() - $('div.leftPage').width()
);

流体布局

如果你真的想要一个纯CSS解决方案，我建议使用流畅的布局。这是跨浏览器。

If you really want a pure-CSS solution, I suggest to use a fluid layout instead. This is cross-browser as well.

div.leftPage { width: 25%; }
div.rightPage { width: 75%; }

模拟表

作为替代，你仍然可以使用 display：table 来模拟表布局。表具有该功能。 查看演示（调整窗口大小以使其工作）

As alternative, you can still simulate a table layout using display: table. Tables do have that functionality. Check out the demo (resize the window to see it working)

这在IE6和IE7中可能无法使用。

This may not work in IE6 and IE7.

本地表

最后，如果您对表格确定，可以使用跨浏览器的原生表格;）

In the end, if you are OK with tables, you can use native tables, which are cross-browser ;)

CSS

table td.fixed { width: 200px; }

HTML

<table>
    <tbody>
        <tr>
            <td class="fixed">
                <p>Left content</p>
            </td><td>
                <p>Right content</p>
            </td>
        </tr>
    </tbody>
</table>

---

最后，为了垂直调整大小需要设置 resize：vertical 。

div.leftpage, div.rightpage { resize: vertical; }

这篇关于丢失元素的位置与css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！