Question

我正在进行练习布局，在那里我设置了一个包装器Div并将CSS中的宽度设置为100％，并将其最小宽度设置为800px，但是在此包装器内部，当我调整大小时，其他内容会重叠窗口。我的html页面

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width" />  
    <title>@ViewBag.Title</title>   
    <link href="~/Content/themes/MyStyle.css" rel="stylesheet" />  
    </head>  
<body>  
    <div id="wrapper">  
        <div class="header">  
            <div style="display:inline-block;width:400px;margin:5px 0 0 100px">This is my site</div>  
            <div style="display:inline-block;width:500px;margin:5px 0 0 20px"><input type="text"/>&nbsp&nbsp<input type="button" value="Search"/>  </div>  
            <div style="display:inline-block;margin:5px 0 0 50px">@Html.Label("","LogIn","")&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp @Html.Label("SignIn")</div>  
        </div>  
    <div>@RenderBody()</div>  
        </div>  
</body>  
</html>

我的Css

body,html,div,form {
margin:0;
padding:0;
}


#wrapper {
width:100%;
min-width:800px;
}

.header {
width:100%;
height:35px;
background-color:rosybrown;
}

所以我的问题是，如果我将它设置为像素，那么我的标题div不会在大屏幕上消耗，而且它的内容也会隐藏在小屏幕上。我完全没有想法，谷歌搜索了这个问题，但没有得到任何解决方案。

Answer 1

你需要努力做到这一点。

从DIV中删除内联CSS
删除导致问题的最小高度
创建一个课程并提供您想要的display:inline和margin
如果您想提供宽度，请仅以百分比表示，以便调整

尝试以下

body,html,div,form {
margin:0;
padding:0;
}


#wrapper {
width:100%;
}

.header {
width:100%;
height:35px;
background-color:rosybrown;
}
.site {
  display:inline;
  margin:10px;
}

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width" />  
    <title>@ViewBag.Title</title>   
    <link href="~/Content/themes/MyStyle.css" rel="stylesheet" />  
    </head>  
<body>  
    <div id="wrapper">  
        <div class="header">  
            <div class='site'>This is my site</div>  
            <div class="site"><input type="text"/>&nbsp&nbsp<input type="button" value="Search"/>  </div>  
            <div style="display:inline-block;margin:5px 0 0 50px">Login</div>  
        </div>  
    <div>@RenderBody()</div>  
        </div>  
</body>  
</html>

希望这对你有所帮助！

宽度设置为100％时Div重叠，但像素宽度设置时不重叠？

1 个答案: