无法使两个CSS元素彼此相邻 [英] Cannot get two CSS elements to be next to each other

问题描述

我不是最好的CSS，不能弄清楚出了什么问题。认为它可能是我在我的侧边栏中使用的标记。我想要nav元素与vertid和div元素与text-containerid是彼此的NEXT，但它的方式，它发送我的东西在文本容器页脚，这是不可接受的。

我很困惑，如何让他们彼此相邻。我知道元素可以彼此相邻，因为它在我的导航元素中工作与horid与所有的a元素彼此相邻，没有问题。

我认为它可能是牌的标签，但不知道我能做些什么。我可以只是打开导航栏，因为我已经在标题，但我只是花了很多时间在导航栏，现在必须杀了它，并希望我可以保留它。

 < html> 
< head> 
< title>度假村< / title> 
< link rel =stylesheettype =text / csshref =./ 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>首页< / a> < / div> 
< div>< a href =mountains.html>山脉< / a>< / div> 
< div>< a href =resorts.html> Resorts< / a>< / div> 
< div>< a href =snowReports.html>雪报告< / a>< / div> 
< div>< a href =eventsAndActivities.html>活动与amp活动活动< / a>< / div> 
< div>< a href =planTrip.html>计划旅行< / a>< / div> 
< / nav> 
< div id =middle> 
< nav id =vert> 
< a href =home.html>首页< / a> < br /> 
< a href =mountains.html>山< / a>< br /> 
< a href =resorts.html> Resorts< / a>< br /> 
< a href =snowReports.html>雪报告< / a>< br /> 
< a href =eventsAndActivities.html>活动与amp活动< / a>< br /> 
< a href =planTrip.html>计划旅行< / a> 
< / nav> 
 
< div id =text-container> 
< h1>度假村< / h1> 
< h2>西度假村< / h2> 
< p> 
西方度假村拥有从开放的初级区域到挑战性的地形公园到滑翔的树木滑雪之旅。它有一个年轻，精力充沛的感觉，但还有更多的只是跳跃和三角形。 West是
 
的家庭儿童体育中心，牛车酒吧和烧烤和Foggy Goggle，时装秀，电影首映和现场表演定期举行。 
< / p> 
 
< h2>东方度假村< / h2> 
< p> 
东方度假村拥有该地区最长的小径，由单一的高速四门轿车服务。它的长，修饰，巡航的足迹，使其完美的雕刻，但它也是奥运碗，最长的，
 
的最大冲击运行在该地区的家。在Diamond Peaks Express快速上升之后，您会发现另外20英亩的初级地形在上面。拥有1,600垂直脚的不间断灯芯绒，东
 
度假村提供传统的滑雪者和滑雪板一个真正的高山体验，而无需远离家乡。 
 
< / p> 
 
< h2>北方度假村< / h2> 
< p> 
北方度假村是一个完美的家庭友好的滑雪胜地，拥有70英亩的平缓地形和历史悠久的木屋，是探索的绝佳选择。它足够大，提供一个真正的冬季体验，但小
 
足以维持其历史的温暖和魅力。您可以在North Lodge酒店下午沿着斜坡下来，或者在壁炉旁用一杯热巧克力预热。它是该地区最古老的
 
基地之一，可以回到20世纪40年代的Big Pine滑雪俱乐部。 
 
< / p> 
< / div> 
< / div> 
< / div> 
 
< div id =footercontainer> 
< footer> 
& copy; 2016 
 
< / footer> 
< / div> 
< / div> 
 
< / body> 
< / html> 
 
 
 
 == main.css == 
 
 #logo 
 {
 
 border：1px紫色; 
 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固体透明; 
 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; 
 
} 
  

解决方案

go ...

https://jsfiddle.net/og9wpLmw /

• 我将两个区块的颜色改为绿色和红色以使它们变得明显


• 我固定& amp;通过放;


• 我通过使其固定


• 我使用display：table-cell $ b
• 我把所有的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; 
} 
  




I'm not the best at CSS and cannot figure out what's wrong. Think it might be the
tags I'm using in my sidebar. I would like the nav element with the "vert" id and the div element with the "text-container" id to be NEXT to each other, but the way it is going, it's sending my stuff in the "text-container" into the footer, which is unacceptable.

I'm baffled as to how to get them next to each other. I know elements can be next to each other as it worked in my nav element with the "hor" id with all the a elements next to each other with no problem.

I think it might be the
tags, but don't know what I can do about it. I could just axe the navbar as I already have that in the header, but I just spent a lot of time on the navbar to now have to kill it and wish I could keep it.

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

}

解决方案

Here you go...

https://jsfiddle.net/og9wpLmw/

• I coloured the two blocks green and red to make them obvious
• I fixed & amp; by putting ; on the ends
• I fixed by making it
• I made boxes next to each other using display:table-cell;
• I put all the CSS into the css file
• I fixed the widths in nav#vert by including px in the measurement.

Here is the css that makes the difference:

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

这篇关于无法使两个CSS元素彼此相邻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！