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

我面临着同样的问题。我试图创建两个单独的行，标记为红色背景色，在中间水平对齐。其中一行位于中心零件左侧，第二行位于中心零件右侧

我需要添加或更改一些值吗？我已经试了两个小时了。 任何帮助都将不胜感激。谢谢各位:

.其他{ 位置：相对位置； 垂直对齐：中间对齐； 宽度：70%； 背景色：D0； 高度：500px； 保证金：自动； 填充：40px 15%20px 15%； 显示：表格； } .其他{ 边际：0px； 高度：300px； 浮动：左； 背景色：红色； }

新闻将在此处显示。

在这里你可以看到我们的产品。

---

为我工作只是删除浮动：左；并添加显示：表格单元格；给其他人。

新闻将在此处显示。

在这里你可以看到我们的产品。

---

您只需要向p提供一个宽度值，因为您将p元素浮动到左侧，容器中的每个p元素都将脱离正常的文档流，并从左向右流动。 只需为每个p元素添加宽度：50%。像这样：

.others p {
 margin: 0px;
 height: 300px;
 float: left;
 background-color: red;
 width:50%;
 }

还提供一个clearfix或overflow:hidden；为了在它的主体中包含浮动元素

这是一个可以合作的方法

编辑：差点忘了。如果您想控制布局，还需要为主体容器提供一个“最小宽度”和“最大宽度”值，这样它在宽屏幕上不会有太大的拉伸，在窄屏幕上也不会包含太多。另外，试试css框架，比如bootstrap。它会让你很好地控制你的布局

干杯

我认为你不应该用来定位

改用

同时使用float:left或float:right可能会解决您的问题

在此处阅读有关使用浮动项的内容：

此外，当使用浮动时，浏览器将假定“容器”中没有任何内容

所以我还建议您阅读css属性溢出的使用

.其他 { 位置：相对位置； 垂直对齐：中间对齐； 宽度：70%； 背景色：D0； 高度：500px； 保证金：自动； 填充：40px 15%20px 15%； 显示：表格； } 左边 { 显示：内联块； 边际：0px； 高度：300px； 宽度：50%； 浮动：左； 背景色：红色； } 右侧 { 显示：内联块； 边际：0px； 高度：300px； 宽度：50%； 浮动：对； 背景颜色：绿色； }

新闻将在此处显示。

在这里你可以看到我们的产品。

---

由于某种原因，它不起作用，只是把块放在一起了：/非常感谢，我需要在后面的部分中使用溢出。我要花很长时间才能找到它。谢谢非常感谢。就是我需要的代码。谢谢。你知道如果这两行是40%而不是50%，我怎么能使它们水平居中，这样它们就不会向左浮动了吗？谢谢！很乐意帮忙。如果你觉得有用，请投票

        


        
            .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;
            }
        
        
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:inline-block;
}

.others p {
 margin: 0px;
 height: 300px;
 float: left;
 background-color: red;
 width:50%;
 }