CSS Visual Studio 2015浮動位置

Question

在我大學時使用的PC上，DIV的位置在Visual Studio 2015社區的DESIGN視圖和Internet Explorer / Chrome瀏覽器調試模式下均能正常工作。 看起來像這樣：

9格，3列和3行

在家里，我使用的是與Uni相同的Visual Studio版本。

這個想法是應該有3行，每行有3個div。 中間的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）上，並將width:auto放置在中間div（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_side DIV中。

如您所見，我嘗試添加一些元標頭，但我不完全知道它在做什么，並且無論如何也沒有任何改變。

我還嘗試過設置諸如display：block，display：inline，display：inline-block等設置，但無濟於事...我不知道為什么以前無法正常運行卻無法正常工作。

Answer 1

在這里，您可以找到一個正在嘗試做的工作示例-我稍稍更改了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>

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;
}

如果您將要使用浮子，我建議您研究一下浮子清理，這樣將來就不會遇到問題，或者如果您真的覺得冒險，請使用flex box 。

此外，請始終記住，元素的高度始終將相對於父容器。 如果在元素上具有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浮動位置

問題描述

3 個解決方案

解決方案1
1 已采納 2016-11-19 04:39:57

解決方案2
1 2016-11-19 04:44:37

解決方案3
1 2016-11-19 05:23:00

CSS Visual Studio 2015浮動位置

問題描述

3 個解決方案

解決方案1 1 已采納 2016-11-19 04:39:57

解決方案2 1 2016-11-19 04:44:37

解決方案3 1 2016-11-19 05:23:00

解決方案1
1 已采納 2016-11-19 04:39:57

解決方案2
1 2016-11-19 04:44:37

解決方案3
1 2016-11-19 05:23:00