Question

我有这个示例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-contains被分解到div-menu的底部，我想让div保持在div-menu旁边，而窗口水平滚动条会出现，

我怎样才能实现

感谢任何建议

谢谢

Answer 1

更改此行

<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

Answer 2

您应该根据其中的内容维护width和parent DIV的高度。请检查此CSS Box Model以保持此状态。

如果父级的宽度为600px，则内部div的宽度或高度应为

内部Div实际宽度/高度+边框宽度+填充＆lt; = 600

因此，根据您的要求（1024px是现在的标准宽度）为您的父div指定一些宽度为：

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

然后阅读箱子模型并保持你的内部Div宽度/高度。

如果未定义宽度，请使用css overflow和一个简单的教程here。

例如，您的内容div没有预测宽度/高度，请使用overflow

div
{
overflow:scroll;
}

在CSS3中，您可以指定要管理的方向：检查这些 CSS OVERFLOW-X

示例：

blockquote { width: 50px; height: 50px; overflow-x: scroll }

<blockquote style=”width: 50px; height: 50px; overflow-x: scroll”>some text</blockquote>

CSS OVERFLOW-Y

CSS Float溢出

2 个答案: