两个相对的CSS容器彼此相邻

时间：2022-02-27 08:41:06

I am currently trying to develop a website where I need to have 2 CSS containers side by side at the same level. I.e. they both need to have top: 0px; However, whey they both have relative the first container is pushed down to where the second container content finishes.

我目前正在尝试开发一个网站，我需要在同一级别并排放置2个CSS容器。即他们都需要有*：0px;然而，乳清它们都是相对的，第一个容器被推到第二个容器内容完成的地方。

How can I get these two containers to sit side by side both needing to be relative. I have been trying to figure it out for ages and google searches don't seem to provide with much help.

我怎样才能让这两个容器并排坐在一起，既需要亲戚。我一直试图弄清楚它的年龄和谷歌搜索似乎没有提供太多的帮助。

I am using HTML5 and CSS3 in order to build the website.

我正在使用HTML5和CSS3来构建网站。

Thanks for any help you can offer.

谢谢你尽你所能的帮助。

EDIT Below is the HTML Code

编辑以下是HTML代码

<div id="feedContainer">
    Latest Tech News<br /><
    The quick brown<br/> fox jumped over the lazy<br /><br />dogs back
 </div>
 <div id="bodyIndex">
     Hi I am a body<br />and i am a new line<br/>r />and i am a <strong>another new line</strong><br />I'm another<br /><br />woo!!<br /><br />
     <font size="+24">I am a large font<br /><br />Please don't move<br />the feed container
               </font>
        </div>

Below is the CSS Code

以下是CSS代码

#bodyIndex
{
   position: relative;
   margin-left: 120px;
   padding-left: 15px;
   padding-top: 5px;
   width: 660px;
   /*padding-bottom: 70px;*/
   /*height: 100%;*/
   /*top: 80px;   */
   /*background-color: #c8c8c8;*/
   background-color: #fff6d1;
   /*clear: both;*/
   clear:none;
   padding-bottom: 60px;
   min-height: 100%;
   height: auto;
}


#feedContainer
{
    position:relative;
/*    top: 0px;*/
    top: 0px;
    bottom: 0;
    width: 180px;
    padding-left: 5px;
    left: 800px;
    font-size: larger;
    font-weight: bold;
    color: black;
    border-left:thin solid #e0e0e0;
    clear: none;
}

两个相对的CSS容器彼此相邻

In the image above where it says 'I am a body' and 'Latest Tech News' should be lined. The only way I can get them to line up is if I set one of them to absolute but I need both containers to be relative

在上面的图片中，“我是一个身体”和“最新科技新闻”应该排成一行。我可以让他们排队的唯一方法是，如果我将其中一个设置为绝对，但我需要两个容器都是相对的

2 个解决方案

#1

3  

Try putting the containers into a <ul> and give the float left css property to the <li> within the unsorted list. Something like this:

尝试将容器放入

    并将float left css属性赋予未排序列表中的
  • 。像这样的东西：

  • 。像这样的东西：
<ul>
   <li style="float:left"> <!--Container here-->
   </li>
   <li style="float:left"> <!--Container here-->
   </li>
</ul>

That way the containers should appear side by side

这样容器应该并排出现

#2

0  

Make sure you understand that position:relative means "relative to what would be my original position" and original box position may not be where you think it is.

确保您理解该位置：相对意味着“相对于我原来的位置”而原始的盒子位置可能不是您认为的位置。

#1

3  

Try putting the containers into a <ul> and give the float left css property to the <li> within the unsorted list. Something like this:

尝试将容器放入

    并将float left css属性赋予未排序列表中的
  • 。像这样的东西：

  • 。像这样的东西：
<ul>
   <li style="float:left"> <!--Container here-->
   </li>
   <li style="float:left"> <!--Container here-->
   </li>
</ul>

That way the containers should appear side by side

这样容器应该并排出现

#2

0  

Make sure you understand that position:relative means "relative to what would be my original position" and original box position may not be where you think it is.

确保您理解该位置：相对意味着“相对于我原来的位置”而原始的盒子位置可能不是您认为的位置。

标签：

相关文章