使用CSS在水平中心的左右两侧设置两行

我也面临同样的问题。我正在尝试创建两个独立的行（标记为红色背景色），以便在中心水平对齐。一排在中心部分的左侧，第二排在中心部件的右侧。

我需要添加一些内容还是更改一些值？我已经试了两个小时了。任何帮助都将不胜感激。谢谢：）

.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
}

<DIV CLASS="others">
  <P ID="leftside">
	News will be shown here as they appear.
  </P>
  <P ID="rightside">
	Here you will be able to see our products.
  </P>
</DIV>

        
        
            .others {
            position: relative;
            vertical-align: middle;
            width: 70%;
            background-color: #d0d0d0;
            height: 500px;
            margin: auto;
            padding: 40px 15% 20px 15%;
            display: table;
            }
        
            .others p {
            margin: 0px auto;
            height: 300px;
        width:50%;
    display-inline-block;
text-align:center;
            float: left;
            background-color: red;
            }
        
        
        
            <DIV CLASS="others">
              <P ID="leftside">
            	News will be shown here as they appear.
              </P>
              <P ID="rightside">
            	Here you will be able to see our products.
              </P>
            </DIV>


 
    仅通过移除float为我工作：left；并添加显示：表格单元格；其他人。Fiddle
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:table-cell;
}

 .others p {
margin: 0px;
height: 300px;
background-color: red;
display:inline-block;
}

 
    我认为您不应该使用<p>进行定位。
    请改用<div>。
    使用float:left或float:right也可以解决您的问题。
    阅读这里使用浮动项目：
    http://www.w3schools.com/cssref/pr_class_float.asp
    此外，当使用float时，浏览器将假定"容器"<div>中没有任何内容。
    因此，我还建议您阅读有关使用css属性overflow的内容。
    http://www.w3schools.com/cssref/pr_pos_overflow.asp
  
 
    
    .others 
    {
      position: relative;
      vertical-align: middle;
      width: 70%;
      background-color: #d0d0d0;
      height: 500px;
      margin: auto;
      padding: 40px 15% 20px 15%;
      display: table;
    }
    #leftside 
    {
        display:inline-block;
        margin: 0px;
        height: 300px;
        width:50%;
        float: left;
        background-color: red;
    }
   #rightside
    {
        display:inline-block;
        margin: 0px;
        height: 300px;
        width:50%;
        float: right;
        background-color: green;
    }
<DIV CLASS="others">
  <P ID="leftside">
	News will be shown here as they appear.
  </P>
  <P ID="rightside">
	Here you will be able to see our products.
  </P>
</DIV>

  
 
    您只需要为p提供一个宽度值，因为您将p元素向左浮动，容器中的每个p元素都将脱离正常的文档流，从左到右流动。只需增加宽度：每个p元素增加50%。像这样：
.others p {
 margin: 0px;
 height: 300px;
 float: left;
 background-color: red;
 width:50%;
 }
还向.others提供clearfix或overflow:hidden;，以便在其主体中包含浮动元素。
这是一个演示来使用
编辑：差点忘了。如果你想控制你的布局，还可以为主体容器提供一个最小宽度和最大宽度值，这样它就不会在宽屏幕上扩展太多，也不会在窄屏幕上包含太多。另外，尝试一个css框架，比如bootstrap。它会让你很好地控制你的布局。
干杯！

相关内容

最新更新

热门标签：