Css 重新调整大小时的健壮页面布局_Css_Html_Css Float

Css 重新调整大小时的健壮页面布局

css html

Css 重新调整大小时的健壮页面布局,css,html,css-float,Css,Html,Css Float,我目前在我的页面上有两个div，它们都是左上角浮动的。我的问题是，当我调整页面大小使其变小时，右div将下沉到左div之下，我更希望它保持在另一个div旁边的位置什么CSS魔法能让我这么做？如果在开发流体布局时出现任何错误，则常见的错误是将%单位与px值混合 %的大小与可用空间相对应，当存在px或em或如果您使用%单位来调整版面大小，则必须确保所有内容的边框、填充、边距都必须为% 对于这样的布局 <div id="left"> Left </div> <

我目前在我的页面上有两个div，它们都是左上角浮动的。我的问题是，当我调整页面大小使其变小时，右div将下沉到左div之下，我更希望它保持在另一个div旁边的位置

什么CSS魔法能让我这么做？如果在开发流体布局时出现任何错误，则常见的错误是将%单位与px值混合

%的大小与可用空间相对应，当存在px或em或

如果您使用%单位来调整版面大小，则必须确保所有内容的边框、填充、边距都必须为%

对于这样的布局

<div id="left">
    Left
</div>
<div id="center">
    Center
</div>

您好，请检查以下相应代码，它将帮助您

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

还有一种不使用%尺寸的方法，因为它们很危险

<div id="left">Left</div>
<div id="center">Center</div>
<br />

致以最良好的祝愿

你能用小提琴把这个拿出来吗？嘿，山姆检查了贴出的答案吗。。。？

#left {
    width: 100px;
    float: left;
}

#center {
    width: 100px;
    margin: 0 auto;
}

br {
    clear: both;
}