Question

这是我在这里问的同一个问题：Cannot get two CSS elements to be next to each other

然而，这一次，当我添加iframe时，它搞砸了。我尝试应用不同的样式，甚至是iframe，但它似乎并没有起作用。我也搞砸了我添加到侧导航栏的ul和li的CSS（没有帮助，虽然更改了ul属性显示：table-row;确实解决了我的其他问题。）

我的主要计划是将iframe放到另一组页面上。（我的餐厅页面可能每个餐厅都有不止一个标签，但我一直想知道如何在我的滑雪场（餐馆所在地）放一个＆＃34;后面的东西，这样用户就可以回到他们身边了。我接着想，为什么不换一个iframe？

然而，一旦我添加了iframe，我之前遇到的麻烦（参见上面的上一个堆栈溢出链接）突然回来了。

的main.css：



#logo
{

border: 1px dashed purple;
width: 1050;
height: 75;

}

#logo > img
{
width: 1050;
height: 75;

}


.floatleft
{
float: left;

}


.floatright
{
float: right;

}

#content
{

 border-left: 3px solid #283379;
  border-right: 3px solid #283379;
  text-align: left;
  margin: 0 auto;


width: 960px;
  background-color: #ffffff;
  background-repeat: repeat-y;
  height: 800;



}


nav
{


      border: 10px solid transparent;
padding: 15px;
  border-image-source: url(./blue-diamond.gif);  
  border-image-repeat:repeat;
   border-image-slice: 30;

background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 110%;

}

nav#vert
{

 width: 220px;
  height: 540px;
  margin: 0px;
 display:table-cell;


}



body { 
  color: #000000;
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: #422520;
  background-image: url(./snow_mountain.jpg);
   background-repeat:no-repeat;

   background-size:cover;
  text-align: center;
  background-attachment: fixed;
  background-position: center;
}

#footerContainer
{

 border-left: 3px solid #283379;
  border-right: 3px solid #283379;
  text-align: left;
  margin: 0 auto;
  width: 980px;
  background-color: #ffffff;
  background-repeat: repeat-y;

}

footer
{

    border: 10px solid transparent;
padding: 15px;


  text-align: left;
  margin: 0 auto;
  width: 1000px;

  background-repeat: repeat-y;

  border-image-source: url(./blue-diamond.gif);  
  border-image-repeat:repeat;
   border-image-slice: 30;

background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 14px;
color: white;

}


footer > a
{
color: white;
font-family: "Impact", Times, serif;
font-size: 14px;

}

#container
{
  border-left: 3px solid #283379;
  border-right: 3px solid #283379;
  text-align: left;
  margin: 0 auto;
  width: 1050px;
  background-color: #ffffff;
  background-repeat: repeat-y;
  height: 750px;

}


nav > a
{

color: #ccccff;

}

nav#hor > div
{

border: 1px solid white;
float: left;
padding: 10px;
background-color: #000044;
}

nav#hor
{
width: 1000px;
height: 50px;
margin: 0;
font-size: 110%;

}


nav#hor a
{

color: rgb(0 0,238);
}


nav#hor > div >  a
{

color:  #ccccff;
text-decoration: none;
font-size: 100%;
}



nav#hor>div:hover
{

background-color: #018802;

}

h1
{
font-family: "MV Boli", Times, Serif;

font-style: bold;
text-align: center;
font-size: 36px;

}

h2
{

font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}

h3
{

font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 20px;
}




#text-container
{





border: 2px solid cyan;



   width: 1005px;
  height: 690px;
  */ zoom: 1;
  */ margin: 0;
  display: table-cell;


 padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;


}



#text-container:after
{
clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility:hidden;

}

#text-container > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}

.left img
{

float: left; 
padding: 0 20px 20px 0;

}





.left > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}


.right img
{
float: right;
    margin: 0px 0px 15px 20px;
  border: 1px solid transparent;

}



.right > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}


nav#hor ul
{
list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #000044;

}

nav#hor ul li:hover
{
  background-color: #018802;

}


nav#vert ul
{
list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #000044;
    display: table-row;

}
nav#hor li
{
float: left;
border: 1px solid white;.

}

nav#vert li
{
float: left;
border: 1px solid white;.

}


nav#vert  li a, .dropbtn {
    display: inline-block;
  //  color: white;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
}


 nav#hor  li a, .dropbtn {
    display: inline-block;
  //  color: white;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
}


nav#hor   li a:hover, .dropdown:hover .dropbtn {
  background-color: #018802;
}

nav#vert   li a:hover, .dropdown:hover .dropbtn {
  background-color: #018802;
}


 li.dropdown {
    display: inline-block;
}

.dropdown-content ul li
{

width: 100%;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      color: rgb(0, 0, 238);
     z-index: 1;

}

#eAndADropdown
{


}

#restaurantDropdown li
{
background-color: #000044;
border: 1px solid white;

}

#restaurantDropdown  ul
{
border: 1px solid white;

}



#restaurantDropdown:hover
{
  background-color: #018802;
}

#restaurantDropdown a
{
    color: rgb(0, 0, 238);

}

.dropdown-content a {
    color: rgb(0, 0, 238);
     border: 1 px solid white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

li  a
{

color: rgb(0, 0, 238);
}

#logo { border: 1px dashed purple; width: 1050; height: 75; } #logo > img { width: 1050; height: 75; } .floatleft { float: left; } .floatright { float: right; } #content { border-left: 3px solid #283379; border-right: 3px solid #283379; text-align: left; margin: 0 auto; width: 960px; background-color: #ffffff; background-repeat: repeat-y; height: 800; } nav { border: 10px solid transparent; padding: 15px; border-image-source: url(./blue-diamond.gif); border-image-repeat:repeat; border-image-slice: 30; background-color: 2211ff; font-family: "Impact", Times, serif; font-size: 110%; } nav#vert { width: 220px; height: 540px; margin: 0px; display:table-cell; } body { color: #000000; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 16px; background-color: #422520; background-image: url(./snow_mountain.jpg); background-repeat:no-repeat; background-size:cover; text-align: center; background-attachment: fixed; background-position: center; } #footerContainer { border-left: 3px solid #283379; border-right: 3px solid #283379; text-align: left; margin: 0 auto; width: 980px; background-color: #ffffff; background-repeat: repeat-y; } footer { border: 10px solid transparent; padding: 15px; text-align: left; margin: 0 auto; width: 1000px; background-repeat: repeat-y; border-image-source: url(./blue-diamond.gif); border-image-repeat:repeat; border-image-slice: 30; background-color: 2211ff; font-family: "Impact", Times, serif; font-size: 14px; color: white; } footer > a { color: white; font-family: "Impact", Times, serif; font-size: 14px; } #container { border-left: 3px solid #283379; border-right: 3px solid #283379; text-align: left; margin: 0 auto; width: 1050px; background-color: #ffffff; background-repeat: repeat-y; height: 750px; } nav > a { color: #ccccff; } nav#hor > div { border: 1px solid white; float: left; padding: 10px; background-color: #000044; } nav#hor { width: 1000px; height: 50px; margin: 0; font-size: 110%; } nav#hor a { color: rgb(0 0,238); } nav#hor > div > a { color: #ccccff; text-decoration: none; font-size: 100%; } nav#hor>div:hover { background-color: #018802; } h1 { font-family: "MV Boli", Times, Serif; font-style: bold; text-align: center; font-size: 36px; } h2 { font-family: "MV Boli", Times, Serif; font-style: bold; text-align: center; font-size: 26px; } h3 { font-family: "MV Boli", Times, Serif; font-style: bold; text-align: center; font-size: 20px; } #text-container { border: 2px solid cyan; width: 1005px; height: 690px; */ zoom: 1; */ margin: 0; display: table-cell; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } #text-container:after { clear: both; content: "."; display: block; height: 0; visibility:hidden; } #text-container > p { font-family: "Myriad Web Pro", Times, Serif; font-size: 18px; } .left img { float: left; padding: 0 20px 20px 0; } .left > p { font-family: "Myriad Web Pro", Times, Serif; font-size: 18px; } .right img { float: right; margin: 0px 0px 15px 20px; border: 1px solid transparent; } .right > p { font-family: "Myriad Web Pro", Times, Serif; font-size: 18px; } nav#hor ul { list-style-type: none; margin: 0; padding: 0; overflow: auto; background-color: #000044; } nav#hor ul li:hover { background-color: #018802; } nav#vert ul { list-style-type: none; margin: 0; padding: 0; overflow: auto; background-color: #000044; display: table-row; } nav#hor li { float: left; border: 1px solid white;. } nav#vert li { float: left; border: 1px solid white;. } nav#vert li a, .dropbtn { display: inline-block; // color: white; text-align: center; padding: 8px 8px; text-decoration: none; } nav#hor li a, .dropbtn { display: inline-block; // color: white; text-align: center; padding: 8px 8px; text-decoration: none; } nav#hor li a:hover, .dropdown:hover .dropbtn { background-color: #018802; } nav#vert li a:hover, .dropdown:hover .dropbtn { background-color: #018802; } li.dropdown { display: inline-block; } .dropdown-content ul li { width: 100%; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); color: rgb(0, 0, 238); z-index: 1; } #eAndADropdown { } #restaurantDropdown li { background-color: #000044; border: 1px solid white; } #restaurantDropdown ul { border: 1px solid white; } #restaurantDropdown:hover { background-color: #018802; } #restaurantDropdown a { color: rgb(0, 0, 238); } .dropdown-content a { color: rgb(0, 0, 238); border: 1 px solid white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1} .show {display:block;} li a { color: rgb(0, 0, 238); }

testingMongoose.php

    <html>
<head>
<title> The Mountains </title>
<link rel="stylesheet" type="text/css" href="./main.css">
<link rel="icon" href="./ski_icon.png">
<script src="jquery-3.0.0.min.js" type="text/javascript"></script>
<script>
 $( document ).ready(function() {

    $("#container").css("height", 800);


  });

  </script>

</head>
<body>





<?php include 'topandside.php';?>

<div id="text-container">



<iframe src="./index.php" width=700;  height=620;></iframe>


  </div>
</div>
</div>

<?php include 'footer.php';?>
</div>

</body>
</html>

这一次，有显示：table-cell; nav＃vert和#text-content都不像以前那样足够。

Answer 1

浮动：左侧导航#vert似乎修复了这个问题，虽然它破坏了其他一些东西（虽然我应该可以修复它们。）

一旦我添加iframe就遇到麻烦了

1 个答案: