个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 05:41:40 25 4
gpt4 key购买 nike

我不是最擅长 CSS 的，也不知道哪里出了问题。认为它可能是我在边栏中使用的
标签。我希望带有“vert”id 的 nav 元素和带有“text-container”id 的 div 元素彼此相邻，但它正在将我在“text-container”中的东西发送到页脚，这是 Not Acceptable 。

我对如何让它们彼此相邻感到困惑。我知道元素可以彼此相邻，因为它在我的带有“hor”id 的 nav 元素中工作，所有 a 元素彼此相邻，没有问题。

我认为它可能是
标签，但不知道我能做些什么。我可以砍掉导航栏，因为我已经在标题中有了它，但我只是花了很多时间在导航栏上，现在不得不杀死它，希望我能保留它。

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

}

最佳答案

给你...

https://jsfiddle.net/og9wpLmw/

  • 我将这两个方 block 涂成绿色和红色以使其更加明显
  • 我修复了 &通过放置；在两端
  • 我通过制作它来修复
  • 我使用 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;
  }

关于css - 无法让两个 CSS 元素彼此相邻，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37846581/

25 4 0
文章推荐： ios - 访问扩展中项目中存在的图像
文章推荐： javascript - 出生日期输入屏蔽在三星设备上不起作用
文章推荐： c++ - sf::Drawable 和 sf::Transformable 包含 Sprite 、文本和形状的数组
文章推荐： ios - 如何在应用程序运行时更改 NavigationBarColor
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com