Question

我在组织两个div时遇到了极大的困难。

我有一个页脚，其中包含两个段落。我希望paragraph 1拥抱页脚div的左边框，我希望paragraph 2拥抱页脚div的右边框， AND 这些段落必须在同一行。

我的问题是我的div表现得很奇怪。

我尝试过漂浮并给出宽度，但似乎没有任何效果，这些段落似乎一直堆积在彼此之上。

有人知道如何解决这个问题吗？我只是想知道如何在相同的边界上写出2个段落。

HTML：

<div id='container'>
   <div id='footer'>
        <div id="errors">
          <p>paragraph 1</p>
        </div>
        <div id="other">
          <p>paragraph 2</p>
        </div>
    </div>
</div>

CSS：

#container
{
   width:90%;
   margin:auto;
   background-color:#F6F4F1;
   border: 5px solid #00b4b4;
   padding:0;
   border-radius: 25px;
}

#footer
{
   width:100%;
   bottom:0;
   color:#838B8B;
   font-family:verdana;
}

#errors
{
   margin-left:4.5%;
   text-align:left;
   color:red;
}

#other
{
   text-align:right;
   margin-right:3%;
   display:inline-block;
}

JS FIDDLE显示我的代码表现得很奇怪。

Answer 1

我已经改变了你的小提琴https://jsfiddle.net/4vuywmn2/1/

您必须将errors div向左浮动，other div向右浮动，并且在它们周围的容器关闭后您必须clear。

要了解您需要clear的原因，建议您阅读this answer

Answer 2

这就是你想要的：

#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}

#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}

#errors
{
margin-left:4.5%;
text-align:left;
color:red;
display:inline-block;
    float:left;
}

#other
{
text-align:right;
margin-right:3%;
display:inline-block;
    float:right;
}

<div id="container">

<div id='footer'>
	
   <div id="errors">
       <p>Paragraph 1</p>
   </div>
   <div id="other">
       <p>Paragraph 2</p>
   </div>
    <div style="clear:both;"></div>
   </div>
    
</div>

您必须为display:inline-block;课程添加error，并使用float：left表示错误，并right表示其他错误。并且，最后，在另一个之后，您必须再添加一个div clear:both;，以及如何清除div float。

Answer 3

尝试像这样的浮动和位置属性......

 #container
    {
    width:90%;
    margin:auto;
    background-color:#F6F4F1;
    border: 5px solid #00b4b4;
    padding:0;
    border-radius: 25px;
    }

    #footer
    {
    width:100%;
    bottom:0;
    color:#838B8B;
    font-family:verdana;
    }

    #errors
    {
    margin-left:4.5%;
    text-align:left;
    color:red;
    float:left;
    position:absolute;
    left:0px;
    }

    #other
    {
    text-align:right;
    margin-right:3%;
    display:inline-block;
    float:right;
    position:absolute;
    right:0px;
    }

Answer 4

试试这个伴侣，这就是你想要的：

#footer
{
height: 100px;
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}

#errors
{
float: left;
margin-left:4.5%;
text-align:left;
color:red;
}

#other
{
    float: right;
text-align:right;
margin-right:3%;
display:inline-block;
}

https://jsfiddle.net/4vuywmn2/5/

Div不对齐（CSS）

4 个答案: