在我在我的大学使用的 PC 上，我的 DIV 的定位在 Visual Studio 2015 社区的设计 View 和 Internet Explorer/Chrome 浏览器 Debug模式下都正常工作。它看起来像这样:
在家里，我使用的 Visual Studio 版本与在大学时使用的相同。
想法是应该有 3 行，每行有 3 个 div。中间的 div 应该比左边和右边的更宽，left_mid/right_mid top_mid/bot_mid DIV 应该有边框。
我把 float:left 放在左边的 div(left_top, left_mid, left_bot) 上，float:right 放在我想放在右边的 div(right_top, right_mid) , right_bot) 和中间 div 上的 width:auto(mid_top, mid_mid, mid_bot)。
这是简单的想法，而且效果很好。当我在家里打开解决方案时，DIV 看起来就像它们在设计 View 中应该的那样 - 但是当我使用 IE/Chrome 调试时在浏览器 View 中 - 由于某种原因它们没有任何高度。一段时间后，我发现出于某种原因我不得不在 FORM 上设置高度和宽度，然后那些小家伙又恢复了他们的高度。 为什么？我不知道，以前不需要在 FORM 上设置高度和宽度。
但是，这并不能解决问题。他们的定位不正确——left_top DIV 在它应该在的位置——在页面的左上角。 Right_top DIV 的位置也正确，它位于我页面的右上角。但是，由于某些未知原因，中间 DIV(mid_top) 与 left_top div 位于同一位置。
它适用于所有行 - mid_top/mid_mid/mid_bot div 与 left_top/left_mid/left_bot div 位于同一位置(正如我所说，仅在浏览器调试 View 中，在设计 View 中看起来一切正常)。
为了更容易理解，这是我对问题的描述:
代码如下:
ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<div id="left_side"></div>
<div id="right_side">
<div id="row1">
<div id="left_top"></div>
<div id="right_top"></div>
<div id="mid_top"></div>
</div>
<div id="row2">
<div id="left_mid"></div>
<div id="right_mid"></div>
<div id="mid_mid"></div>
</div>
<div id="row3">
<div id="left_bot"></div>
<div id="right_bot"></div>
<div id="mid_bot"></div>
</div>
</div>
</div>
</form>
</body>
</html>
和 CSS 样式表:
body {
height:800px;
width:1200px;
}
#form1{
height:800px;
width:1200px;
}
#page{
height:800px;
width:1200px;
}
#left_side{
height:100%;
width:25%;
float:left;
}
#right_side{
height:100%;
width:75%;
float:right;
}
#row1{
height:33%;
width:100%;
}
#left_top{
height:100%;
width:25%;
float:left;
}
#right_top{
height:100%;
width:25%;
float:right;
}
#mid_top{
height:100%;
width:50%;
border:dashed;
border-width:1px;
}
#row2{
height:33%;
width:100%;
}
#left_mid{
height:100%;
width:25%;
float:left;
border:dashed;
border-width:1px;
}
#right_mid{
height:100%;
width:25%;
float:right;
border:dashed;
border-width:1px;
}
#mid_mid{
height:100%;
width:50%;
}
#row3{
height:33%;
width:100%;
}
#left_bot{
height:100%;
width:25%;
float:left;
}
#right_bot{
height:100%;
width:25%;
float:right;
}
#mid_bot{
height:100%;
width:50%;
border:dashed;
border-width:1px;
}
Left_side DIV 在这里是不必要的 - 我稍后会在元素中使用它。所有操作都在 right_side DIV 中。
如您所见，我尝试添加一些元 header ，但我不完全知道它在做什么，而且它也没有改变任何东西。
我也试过设置 display:block, display:inline, display:inline-block 等等，但是没有用...我不知道为什么它工作得很好却不能工作之前。
最佳答案
给你，一个你正在尝试做的工作的例子 - 我稍微改变了 HTML 和 CSS，所以如果你受限于使用 float 等，那么它就不会工作，但否则它完全符合您的要求。
html,body {
margin: 0; padding; 0;
}
body {
height:800px;
width:1200px;
}
#form1{
height:800px;
width:1200px;
}
#page{
height:800px;
width:1200px;
}
#left_side{
height:100%;
width:25%;
float:left;
display: none;
}
#right_side{
height:100%;
width:75%;
float:right;
overflow: hidden;
}
#row1 div,#row2 div, #row3 div {
display: inline-block;
}
.row .left,.row .right {
width: 25%;
}
.row .middle {
width: 50%;
}
#left_top{
border: 1px solid blue;
}
#right_top{
border: 1px solid green;
}
#mid_top{
border: 1px dashed brown;
}
#left_mid{
border: 1px solid blue;
}
#right_mid{
border: 1px solid green;
}
#left_bot{
border: 1px solid blue;
}
#right_bot{
border: 1px solid green;
}
#mid_bot{
border: 1px dashed brown;
}
#row1,#row2,#row3 {
border: 1px solid red;
height: 33%;
width: 100%;
}
div {
box-sizing: border-box;
}
div div {
height: 100%;
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<div id="left_side"></div>
<div id="right_side">
<div id="row1" class="row">
<div id="left_top" class="left"></div><div id="mid_top" class="middle"></div><div id="right_top" class="right"></div>
</div>
<div id="row2" class="row">
<div id="left_mid" class="left"></div><div id="mid_mid" class="middle"></div><div id="right_mid" class="right"></div>
</div>
<div id="row3" class="row">
<div id="left_bot" class="left"></div><div id="mid_bot" class="middle"></div><div id="right_bot" class="right"></div>
</div>
</div>
</div>
</form>
</body>
</html>关于html - CSS Visual Studio 2015 float 定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40689168/