试图将两个 div 对齐到中心以从同一位置开始

Question

我正在尝试将两个 div 对齐到中心并使用 css 从同一位置开始

这是内联样式的 CSS 代码。第一个 div 的名称是 container，第二个 div 的名称是 descriptionarea

#container {
            width: 60%;
            height: auto;
            margin-left:auto;
            margin-right:auto;
        }

        .inner-container {
            min-height: 400px;
            display: inline-block;
            overflow-y: auto;
            border: 4px solid black;
            margin-left:auto;
            margin-right:auto;
        }

        #chats-container {
            height: 70%;
            width: 60%;
            padding-top:5px;
            padding-left:5px;
        }

        #users-container {
            height: 70%;
            width: 22%;
            padding-top:5px;
            padding-left:5px;
        }

        input[type=submit] {
        border: 1px solid #f44c0e;
        color: #fff;
        background: tomato;
        padding: 10px 20px;
        border-radius: 3px;
        }
        input[type=submit]:hover {
            background: #f44c0e;
        }

        textarea {
         width: 550px;
         height: 60px;
         font: normal 14px verdana;
         line-height: 30px;
         padding: 2px 10px;
         border: solid 1px #ddd;
        margin-left: auto;
        margin-right: auto;
        }


        .descriptionarea {
       min-width: 490px;
       position: relative;
       display: inline-block;
        margin-left: auto;
        margin-right: auto;
        }

    .descriptionarea textarea{
    width: 490px;
    height: 20px;
    height: 60px;
    font: normal 14px verdana;

    }

    .descriptionarea span.namefortxtarea{
        display: block;
        text-align: left;
        font-size:12px;
    }

    .descriptionarea span.buttonfortxtarea{
        display: block;
        text-align: right;
    }

这就是我以 html 格式调用/应用两个 div 的方式 第一个 div

<div id="container">
    <div id="chats-container" class="inner-container">
    </div>
   <div id="users-container" class="inner-container">

    </div>
</div>

第二个 div

<div class="descriptionarea">
    <textarea id="new-chat-input" ></textarea>
    <span class="buttonfortxtarea">
    <button class= "btn btn-mini description_submit" id="new-chat-button">Submit</button></span>
    </div>

我已经尝试应用到两个 div，但是两个 div 仍然没有对齐到中心并且没有开始到相同的位置。

margin-left:auto; 边距右：自动；

Answer 1

一种解决方案是使用Flexbox

Answer 2

是的，您可以使用 Flexbox，它支持所有流行的浏览器，请在类名中使用 CamelCase 表示法或连字符。

Answer 3

这种情况是因为 display: inline-block。您应该尝试使用将块放在一个容器中并使用 float: left 作为第一个和第二个 div。并删除显示：inline-block

<div class = "center">
    <div id="chats-container" class="inner-container">
</div>
   <div id="users-container" class="inner-container">

</div>
</div>
<div class="descriptionarea">
    <textarea id="new-chat-input" ></textarea>
    <span class="buttonfortxtarea">
    <button class= "btn btn-mini description_submit" id="new-chat-button">Submit</button></span>
    </div>
</div> 



 .inner-container {
            min-height: 400px;
           float: left;
            overflow-y: auto;
            border: 4px solid black;
            margin-left:auto;
            margin-right:auto;
        }

.descriptionarea {
       min-width: 490px;
       position: relative;
       margin-left: auto;
        margin-right: auto;
        float: left;
        }

Answer 4

如果您删除 div#container 的 id 属性并将其替换为 .descriptionarea 类，并且您将两个 div 都用父 div#container 包装，您的 div 将在中心对齐。

<div id="container">
<div class="descriptionarea">
    <div id="chats-container" class="inner-container"></div>
    <div id="users-container" class="inner-container"></div>
</div>
<div class="descriptionarea">
    <textarea id="new-chat-input" ></textarea>
    <span class="buttonfortxtarea">
             <button class="btn btn-mini description_submit" id="new-chat-button">Submit</button>
    </span>
</div>
</div>