Question

我不是最好的CSS，也无法弄清楚什么是错的。认为它可能是我在侧边栏中使用的标签。我想带有“vert”id的nav元素和带有“text-container”id的div元素彼此相邻，但是它的方式，它将我的东西发送到“text-container”中页脚，这是不可接受的。

我很困惑如何让他们彼此相邻。我知道元素可以彼此相邻，因为它在我的nav元素中使用“hor”id，所有元素彼此相邻，没有任何问题。

我认为它可能是标签，但不知道我能做些什么。我可以直接敲击导航栏，因为我已经在导航栏中使用了导航栏，但我只是花了很多时间在导航栏上，现在必须杀死它并希望我能保留它。

  <html>
    <head>
    <title> The Resorts </title>
    <link rel="stylesheet" type="text/css" href="./main.css">
    </head>
    <body>

    <style>

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

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

    }

    h2
    {

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

    #text-container
    {
      width: 1045px;
      height: 690px; */
      zoom: 1;
      margin: 0;
      display: inline-block


    }

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



    </style>

    <div id="content">
    <div id="logo">
    <img src="./logo.png"></img>
    </div>
    <div id="container">
    <nav id="hor">
    <div><a href="home.html"> Home </a> </div>
    <div><a href="mountains.html"> The Mountains </a></div>
    <div><a href="resorts.html"> The Resorts </a></div>
    <div><a href="snowReports.html"> Snow Reports </a></div>
    <div><a href="eventsAndActivities.html"> Events &amp Activities </a></div>
    <div><a href="planTrip.html"> Plan A Trip </a></div>
    </nav>
    <div id="middle">
    <nav id="vert">
    <a href="home.html"> Home </a> <br/>
    <a href="mountains.html"> The Mountains </a><br/>
    <a href="resorts.html"> The Resorts </a><br/>
    <a href="snowReports.html"> Snow Reports </a><br/>
    <a href="eventsAndActivities.html"> Events &amp Activities </a><br/>
    <a href="planTrip.html"> Plan A Trip </a>
    </nav>

    <div id="text-container">
    <h1>   The Resorts </h1>
      <h2>   The West Resort </h2>
        <p>
    The West Resort has everything from wide-open beginner areas to challenging terrain parks to gladed tree skiing hideaways.  It has a young, energetic feel, but there's more to it than just jumps and jibs.  West is 

    home to the Children's Sports Center, the Bullwheel Bar and Grill and the Foggy Goggle where fashion shows, movie premieres and live performances are held on a regular basis.
       </p>

    <h2>  The East Resort </h2>
     <p>
    The East Resort boasts the longest trails in the region serviced by a single high-speed quad.  Its long, groomed, cruising trails make it perfect for carving, but it is also home to the Olympic Bowl, the longest, 

    steepest bump run in the region.  After a quick ascent on the Diamond Peaks Express, you'll find an additional 20 acres of beginner terrain up top.  With 1,600 vertical feet of uninterrupted corduroy, the East 

    Resort offers traditional skiers and snowboarders a true alpine experience without having to journey far from home.

      </p>

    <h2>  The North Resort </h2>
      <p>
    The North Resort is the perfect family-friendly ski resort with 70 acres of gently rolling terrain and historic, log cabins that are terrific for exploring.  It is big enough to offer a true winter experience but small 

    enough to maintain its historical warmth and charm.  Spend the afternoon shushing down the slopes or warm up by the fireplace with a cup of hot chocolate at the North Lodge.  It is one of the region’s oldest 

    base lodges with ties that go back to the Big Pines ski clubs of the 1940s.

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

    <div id="footercontainer">
    <footer>
    &copy;  2016   

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

    </body>
    </html>



==main.css==

#logo
{

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

}

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

}


#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: 500;



}


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: 170%;

}

nav#vert
{
width: 220;;
height: 540;
margin: 0;

}

body { 
  color: #000000;
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: #422520;
  background-image: url(./image8.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: 170%;

}

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

}


nav > a
{

color: #ccccff;

}

nav#hor > div
{

border: 1px solid white;
float: left;
padding: 10px;
}

nav#hor
{
width: 1000px;
height: 50px;
margin: 0;

}



nav#hor > div >  a
{

color:  #ccccff;
}



nav#hor>div:hover
{

background-color: #01ff02;

}

Answer 1

可能是因为你的＆＃34; vert＆＃34;和/或你的＆＃34;文本容器＆＃34;宽度太大了。

Answer 2

你去......

https://jsfiddle.net/og9wpLmw/

我将两块绿色和红色着色以使它们显而易见
我修复了＆amp;放大器;通过推杆;最后
我修好了
我使用display：table-cell;
我将所有CSS放入css文件
我通过在测量中包含px来修复nav＃vert的宽度。

这是产生差异的CSS：

#text-container {
  width: 1045px;
  height: 690px;
  */ zoom: 1;
  margin: 0;
  display: table-cell;
  background-color:red;
}
nav#vert {
  background-color:green;
  width: 220px;
  height: 540px;
  margin: 0px;
  display:table-cell;
  }

Answer 3

你有一个固定宽度的导航 - 宽度设置为220px，但是你有填充/边距等等，所以它最终变为270px宽（nb。如果你是不熟悉，右键单击现代Web浏览器中的元素并选择“检查”，您可以轻松地测量元素并在CSS中查看它们的属性。

因此，为了使您的其他文本容器适合它，您需要减小它的宽度以允许导航的宽度。使用calc

可以轻松实现此目的

width: calc(100% - 270px);

将CSS添加到文本容器中（并删除其他宽度声明），它将起作用。这不是最佳做法，但您可以通过添加!important来强制执行此声明以优先：

#text-container {
    width: calc(100% - 270px) !important;
}

您只需要添加它，或修改现有的CSS，就可以了。

Answer 4

这样可行，但我后面注意到的问题是，如果我将iframe作为“text-container”中的第一个元素并且在iframe之前没有东西，那么导航栏再次搞砸了。

我可以使用另一种显示器吗？

无法让两个CSS元素彼此相邻

4 个答案: