div居中div的左侧对齐

Question

我需要做下一件事：

我需要div在页面中间居中

.container12
    {
    max-width: 960px;
    width: 100%;
    height: auto;
    overflow: hidden;

    margin-left: auto;
    margin-right: auto;
    }

我需要另一个div，其类名是＆＃34; leftDiv＆＃34;它将位于div的左侧，类为＃34; container12＆＃34;。 .leftDiv应浮动在.container12的左侧，并且从页面末尾到.container12的左侧有宽度。

这是图片：

如何为leftDiv编写课程？

Answer 1

以下是您可以根据自己的问题使用的简单方法：

.container12 {
  width:50%;
  height:200px;
  border:1px solid black;
  display:inline-block;
}
.leftDiv {
  width:25%;
  height:200px;
  border:1px solid black;
  display:inline-block;
  float:left;
}

请注意，浮点数会将元素从页面流中拉出，因此您需要将clearfix应用于居中的div，以使元素保持正确对齐。

CodePen demo

Answer 2

将float：left添加到每个元素，它们应该并排排列。像这样的东西 -

.container12
        {
        max-width: 960px;
        width: 100%;
        height: auto;
        overflow: hidden;
        float:left;

        margin-left: auto;
        margin-right: auto;
        }

    .leftDiv {
        width: 40%; 
        height: auto;
        overflow: hidden;
        float:left;

    }

确保玩弄宽度等，你应该得到你需要的东西。