CSS Visual Studio 2015浮动定位

Question

在我在我的大学使用的 PC 上，我的 DIVs 的定位在 Visual Studio 2015 社区的设计视图和互联网 Explorer/Chrome 浏览器调试模式下都工作正常.它看起来像这样：

在家里，我使用的 Visual Studio 版本与大学时相同。

想法是应该有 3 行，每行有 3 divs。中间的div应该比左右宽，left_mid/right_midtop_mid/bot_midDIV应该有边框

我把float:left放在左边divs(left_top,left_mid,left_bot),float:right放在divs 我想放在右边(right_top, right_mid, right_bot) 和 width:auto 在中间 divs(mid_top , mid_mid, mid_bot).

想法很简单，而且效果很好。当我在家里打开解决方案时，DIV 看起来就像它们在设计视图中应该的那样 - 但是在浏览器视图中当我使用 IE/Chrome 进行调试时 - 由于某种原因它们没有任何高度。一段时间后，我发现出于某种原因我不得不在 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 完全位于同一位置（正如我仅在浏览器中所说的那样调试视图，在设计视图中它看起来都很好）。

为了更容易理解，下面是我对问题的描述：

代码如下：

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_sideDIV中。

如您所见，我尝试添加一些元数据 header 但我不完全知道它在做什么，而且它并没有改变任何东西。

我也尝试过设置 display:block、display:inline、display:inline-block 等设置，但无济于事...我不知道为什么以前工作正常的时候现在还工作。

Answer 1

给你，一个你正在尝试做的工作的例子 - 我改变了 HTML 和 CSS 一点，所以如果你受限于使用浮点数等等, 那么它将不起作用，但否则它会完全按照您的要求进行。

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>

Answer 2

我相信这更符合您的要求：

https://jsfiddle.net/hzk2yxpv

<div class="wrapper">
  <div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
  <div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
  <div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
</div>

和css

.container {
  width: 100%;
  border: 1px solid black;
  height: 50vh;
  margin: 0;
}

.left {
  width: 25%;
  border: 1px solid black;
  height: 100%;
  float: left;
}

.middle {
  width: auto;
  height: 100%;
  border: 1px solid black;
  float: left;
}

.right {
  width: 25%;
  border: 1px solid black;
  height: 100%;
  float: right;
}

如果您要使用浮动，我建议您查看 float clearing so you don't run into problems in the future, or if you're feeling really adventurous, flex boxes。

此外，永远记住元素的高度总是相对于父容器的。如果元素上有 height: auto 并且未指定父元素高度链上的任何父元素，则高度将显示为零。

Answer 3

我有一个没有浮动的解决方案。使用 flex-box 更直接。我希望你发现它很容易理解。我没有对您的代码进行太多更改，因此您可以看到。

/*an example of doing it with flexbox, I have not changed your syntax too much, so that you can figure out how it works */

body {
  height: 800px;
  width: 1200px;
}
#form1 {
  display: flex;
  flex-direction: column;
  /*let the rows flex in column */
  height: 800px;
  width: 1200px;
}
#page {
  height: 800px;
  width: 1200px;
}
#row1,
#row2,
#row3 {
  display: flex;
  height: 33%;
  width: 100%;
}
#left_top,
#right_top {
  flex-grow: 1;
  /*specifies how much the item will grow relative to the rest of the flexible items inside the same container. */
  height: 100%;
}
#mid_top,
#left_mid,
#mid_bot,
#right_mid {
  flex-grow: 1;
  height: 100%;
  border: dashed;
  border-width: 1px;
}
#mid_mid,
#left_bot,
#right_bot {
  flex-grow: 1;
  height: 100%;
}

<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="row1">
        <div id="left_top">left-top</div>
        <div id="mid_top">mid-top</div>
        <div id="right_top">right-top</div>
      </div>
      <div id="row2">
        <div id="left_mid">left-mid</div>
        <div id="mid_mid">mid-mid</div>
        <div id="right_mid">right-mid</div>
      </div>
      <div id="row3">
        <div id="left_bot">left-bot</div>
        <div id="mid_bot">mid-bot</div>
        <div id="right_bot">right-bot</div>
      </div>
    </div>
  </form>
</body>

</html>

CSS Visual Studio 2015浮动定位

CSS Visual Studio 2015 Float positioning

html

css

asp.net

css-float

visual-studio-2015