如何将两个块项目放在一行

Question

我正在尝试使用内联块在一行中对齐new-setstion，user-section但是当我放置文本时它们会分歧。

这是我的css代码，如果您有更好的建议或批评，请分享。

.page-content {
        margin: 0 auto;
        text-align: center;
    }
    div.news-section {
        display: inline-block;
        max-width: 500px;
        min-width: 200px;
        background-color: #fff;
        word-wrap: break-word;
        text-align: left;
    }
    div.user-section {
        display: inline-block;
        max-width: 300px;
        min-width: 200px;
        background-color: #fff;
        word-wrap: break-word;
        text-align: left;
    }

这是我的HTML代码

<div class="page-content">
  <div class="news-section">
    <div class="news-section-header">
        <h2>News</h2>
     </div>
        <!-- content -->
  </div>
<div class="user-section">
  <div class="user-section-header">
     <h2>User section</h2>
   </div>
<form  class="user-login-form" method="POST">
    <div><input type="email" name="user-name" placeholder="John-Doe@mail.com" /></div>
    <div><input type="password" name="user-pass" placeholder="*****" /></div>
    <div><input type="submit" name="sub-button" value="Login"/></div>
    </form>
            <!-- another div content -->
</div>

Answer 1

我认为你想要这样的事情：https://jsfiddle.net/oqvzraxs/，如果我理解你的问题。

我已将["+'name'", "-'Updated Date'", "-'city'"]添加到display: inline-flex

.page-content