html - CSS float 溢出

标签 html css

我有这个示例 html

 <html>
     <head>
        <style type="text/css">
            .div-menu
            {
                width:300px;
                margin-left:20px;
                margin-right:20px; 
                float:left;
                border:thin solid;      
                min-height:600px;
                height:auto;
            }

            .div-content
            {
                float:left;
                min-width:700px;
                width:auto;
                border:thin solid;         
                min-height:600px;
                height:auto;          
                padding-right:20px;
            }   
        </style>
     </head>

     <body>
        <div style="margin-top:50px;padding:10px;">
            <div class="div-menu">

            </div>


            <div class="div-content">
                <div id='main' style="width:2000px;background-color:lightblue;height:600px">
                    Hello world

                </div>

            </div>

        </div>


     </body>

     </html>

当div main的实际宽度大于页面宽度时,div-contain被分解到div-menu的底部,我想让那个div保持在div-menu的旁边,并且窗口水平滚动条会出现,

我怎样才能实现

感谢任何建议

谢谢

最佳答案

改变这一行

<div style="margin-top:50px;padding:10px;">

<div style="width:2364px; margin-top:50px;padding:10px;">

指定宽度等于div-menu和div-content的有效宽度之和

在这种情况下,宽度应为 2364px

这是通过找到 div_width + margin_widths + padding_widths + border_widths 的总和来计算的

(300+20+20+2)+(2000+20+2)=2364

关于html - CSS float 溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8381748/

相关文章:

javascript - Facebook 不加载 CSS/JS

css - Laravel - barryvdh pdf - 如何将外部 css 文件包含到 html View 中

javascript - 将 SVG 定位在浏览器窗口的中间

jquery - 如何为 jquery 多选添加全选和取消全选选项?

php - 我将如何使用 PHP 来处理占位符 div,然后是 "overwritten"?

javascript - 如何将 CSS 类应用于刚刚成功的 ID

javascript - CSS 背景色有效性

php - 如果已在另一个选项卡中打开,则阻止打开 html

javascript - Css 文本动画问题

php - 有什么方法可以在 Laravel 的 .css 文件中使用 Blade 来生成 "CSS" View ?