Question

我试图在屏幕中间水平和垂直地并排浮动两个div元素。但它们没有准确显示。这是视觉

这是我的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％，如果你有边距/填充，则稍微减少。

Answer 2

尝试使用flex，获取两个元素，删除该css，然后输入：

.contenedor{
  display:flex;
  flex-wrapper:nowrap;
}

.config{
  background-color:red;
}

.log{
  background-color:blue;
}

.config, .log{
  padding:25px;
}

<div class="contenedor">
<div class="config">
  lorem ipsum
  </div>
  <div class="log">
    lorem ipsum
  </div>
</div>

从那以后，做你想做的事。

希望它适合你！

Div在两侧浮动，垂直线将它们分开

2 个答案: