Question

我正在重述这个问题。我不得不设计一整页来展示这一点。

Gallery DIV假设显示在Events DIV旁边，但是当我将TABLE放入kevin.php时，它会将Gallery DIV移动到kevin2 div中。我删除了TABLE，它会回到它应该的方式。

我做错了什么？

的index.php

<head>
<TITLE>example page</TITLE>
<link rel="stylesheet" type="text/css" href="some.css" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<div class="events">
<h2>Events</h2>
</div>
    <div class="eventsmenu">
        <div class ="kevin">
            <b>Kevin's Kleanup</b>
        </div>
        <div class ="shady">
            <b>Shady Sweep</b>
        </div>
    </div>

<script>
$( ".events" ).click(function() {
  $( ".eventsmenu" ).slideToggle( "slow" );
});
</script>

    <div class="kevin2"><?php include("kevin.php"); ?></div>
    <div class="shady2"><?php include("shady.php"); ?></div>

<script>
$( ".kevin" ).click(function() {
  $( ".kevin2" ).slideToggle( "slow" );
});
$( ".shady" ).click(function() {
  $( ".shady2" ).slideToggle( "slow" );
});
</script>

<div class="gallery">
<h2>Gallery</h2>
</div>
    <div class="gallery2">
        <div class="galclose">
        <h4>Close Window</h4>
        </div>
        <script>
        $( ".galclose" ).click(function() {
          $( ".gallery2" ).slideToggle( "slow" );
        });
        </script>
    <iframe style="width:100%;height:900px;border:3px black;" src="gallery.php"></iframe>
    </div>
<script>
$( ".gallery" ).click(function() {
  $( ".gallery2" ).slideToggle( "slow" );
});
</script>

</body>

kevin.php

<div class="kevinclose">
<h4>Close Window</h4>
</div>
<script>
$( ".kevinclose" ).click(function() {
  $( ".kevin2" ).slideToggle( "slow" );
  $( ".eventsmenu" ).slideToggle( "fast" );
});
</script>

<h2><i>2014</i></h2>
<table border=1>
<tr>
    <td>Overall Results</td>
    <td>Class Results</td>
    <td>Participants</td>
    <td>Number</td>
    <td>Class</td>
    <td>Overall Time</td>
</tr>

some.css

    body {
  color: #000000;
  background: #7af8f7; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    left top,
    #009ad2,
    #7af8f7
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(
    bottom right,
    #009ad2,
    #7af8f7
  ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    bottom right,
    #009AD2F,
    #7af8f7
  ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(
    to bottom right,
    #009ad2,
    #7af8f7
  ); /* Standard syntax */
}

.events {
  float: left;
  width: 30%;
  background-color: #009ad2;
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  border-radius: 40px;
  margin: 5px;
  text-align: center;
  margin: 10px;
}
.eventsmenu {
  z-index: 2;
  display: none;
  float: left;
  margin-right: -150px;
  position: relative;
  padding: 10px 10px;
  display: none;
  background-color: #7af8f7;
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  border-radius: 10px;
}

.kevin2 {
  display: none;
  z-index: 2;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 80%;
  background-color: #009ad2;
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  border-radius: 10px;
  padding: 5px;
}
.kevinclose {
  background-color: #7af8f7;
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  border-radius: 5px;
  position: absolute;
  right: 10px;
  line-height: 2%;
  padding-left: 5px;
  padding-right: 5px;
}

.shady2 {
  display: none;
  z-index: 2;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 80%;
  background-color: #009ad2;
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  border-radius: 10px;
  padding: 5px;
}
.shadyclose {
  background-color: #7af8f7;
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  border-radius: 5px;
  position: absolute;
  right: 10px;
  line-height: 2%;
  padding-left: 5px;
  padding-right: 5px;
}
.gallery {
  float: left;
  width: 30%;
  background-color: #009ad2;
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  border-radius: 40px;
  margin: 5px;
  text-align: center;
  margin: 10px;
}
.gallery2 {
  display: none;
  z-index: 2;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 80%;
  background-color: #009ad2;
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  border-radius: 10px;
  padding: 5px;
}
iframe {
  overflow: hidden;
}
.galclose {
  background-color: #7af8f7;
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  border-radius: 5px;
  position: absolute;
  right: 10px;
  line-height: 2%;
  padding-left: 5px;
  padding-right: 5px;
}

shady.php

<h1>Shady</h1>

gallery.php

<h1>Gallery</h1>

Answer 1

您的表格格式不正确，您没有关闭</table>。正确的语法是：

<table>
    <thead>
        <tr>
            <th>Head1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Body1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Foot1</td>
        </tr>
    </tfoot>
</table>

由于您没有关闭表格，因此浏览器必须弄清楚它的结束位置。这就是你布局破碎的原因。

我们可以看到的其他数据here说明如果元素未关闭且浏览器遇到其他元素（未到位）会发生什么：

在某些外部标记内明确禁止添加的元素。在这种情况下，我们应该关闭所有标签，禁止使用元素，然后添加它。

但是由于下一个元素是<div class="shady2">并且在表格中没有被禁止，因此浏览器将其作为已打开表格的一部分呈现。

HTML表格代码违反了我的DIV订单

1 个答案: