css - 调整大小时稳健的页面布局

标签 css html css-float

我目前在我的页面上有两个 div,它们大约位于中左,并且它们都向左浮动。我的问题是,当我调整页面大小时使其变小时,右边的 div 会下沉到左边的 div 下方,我希望它保持在另一个 div 旁边的位置。

什么 CSS 魔术可以让我做到这一点? (如果有的话)

最佳答案

您好,请检查以下相应代码,它会对您有所帮助....

<html>
    <head>
        <style type="text/css">
            #left {
                border:1px solid red;
                width:40%;
                height:auto;
                float:left;
            }
            #right {
                border:1px solid blue;
                width:40%;
                height:auto;
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="left">
            <h1>Sample 1</h1>
            <h1>Sample 1</h1>
            <h1>Sample 1</h1>
            <h1>Sample 1</h1>
        </div>
        <div id="right">
            <h1>Sample 2</h1>
            <h1>Sample 2</h1>
            <h1>Sample 2</h1>
            <h1>Sample 2</h1>
        </div>
    </body>
</html>

关于css - 调整大小时稳健的页面布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15151031/

相关文章:

html - Twitter Bootstrap 破坏了 div 的内容,里面有几个元素

html - 悬停在文本上时如何为 "scale and rotate image"?

html - Internet Explorer 8 - 打印页面的标题

html - css 样式问题,对于按钮

python - 是否可以使用 python 获取网页的前几个,比如 1K?

html - 在浏览器重新调整大小时,div 下降

html - 为什么 div 和 Nav 下显示为 block ?

css - BEM CSS、全局变量和类命名

css - float div的自动宽度

html - 动态左浮动 UL 在左浮动 DIV 内