css - Div float 在两侧，用垂直线分隔它们

Question

我正在尝试创建两个 div 元素并排 float 在屏幕中间水平和垂直。但它们没有得到准确显示。这是视觉效果

Image 1

Image 2

这是我的 HTML

<div id="config">
    <button class="echo-test-button" id="connect" ng-click="connect()">
        Connect
    </button>
    <button class="echo-test-button" id="disconnect" ng-click="disconnect()">
        Disconnect
    </button>
    <strong> Message</strong>

    <input type="text" ng-model="message" maxlength="40" placeholder="Enter Message Here" ng-disabled="isConnected"/>
    <button class="echo-test-button" id="sendMessage" ng-click="sendMessage(message)" ng-disabled="isConnected">
        Send
    </button>
</div>
<div id="log">
    <strong>Log</strong>
    <div id="consoleLog">
    </div>
    <button class="echo-test-button" id="clear" ng-click="clearLog()">
        Clear
    </button>
</div>

CSS 文件

#cofig{
  float: left;
}

#log{
  float: left;
  margin-left: 20px;
  padding-left: 20px;
  width: 350px;
  border-left: solid 1px #cccccc;
}

Answer 1

您的 #log div 有宽度，但 #cofig div 没有。这意味着您的 #cofig div 将占据 100% 的宽度。

尝试将每个 div 的宽度设置为 50%，或者如果您有边距/填充，则略小一些。