Question

我一直在尝试着Electron，为此，我试图创建两个相邻的div。我在这里阅读了一些将两个div并排对齐的解决方案，但是对我没有任何帮助。到目前为止，这是我的代码：

代码

body, html {
    height: 100%;
}

.wrapper{
    height: 90%;
}

.request-pane {
    float:left; /* add this */
    margin-left: 10%;   
    height: 90%;
    width: 45%;
    border: 1px solid red;
}

.response-pane {
    float:right; /* add this */
    margin-left: 55%;
    height: 90%;
    width: 45%;
    border: 1px solid black;
}

<div class="wrapper">
    <div class="request-pane"></div>
    <div class="response-pane"></div>
</div>

有人可以指出我在这里做错了什么吗？我对HTML非常陌生，所以我不知道解决方案是否太明显

Answer 1

您可以通过两种方式来实现。

删除浮动属性并添加

.wrapper { 高度：90％; 显示：flex; }
尝试在CSS中使用display：inline-block来处理请求窗格和响应窗格

Answer 2

如果您想在此处保留floats-使用代码进行固定

body, html {
  height: 100%;
}

.request-pane, .response-pane {
  box-sizing: border-box; /* count border inside of a `width` */
}

.wrapper {
  height: 90%;
}

.request-pane {
  float: left;
  margin-left: 10%;
  height: 90%;
  width: 45%;
  border: 1px solid red;
}

.response-pane {
  float: right;
  /* margin-left: 55%; */ /* this is a root of a problems */
  height: 90%;
  width: 45%;
  border: 1px solid black;
}

<div class="wrapper">
    <div class="request-pane"></div>
    <div class="response-pane"></div>
</div>

但是，是的，您最好使用flexbox。一个很好的指南，您可以在这里找到：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

而且，您似乎对HTML / CSS的工作方式缺乏基本的了解，因此，最好继续学习一些免费的基础知识课程。

Answer 3

删除margin-left属性，并将display:inline-flex添加到css类request-pane和response-pane中，如下所示。

body, html {
    height: 100%;
}

.wrapper{
    height: 90%;
}

.request-pane {
    float:left; /* add this */
    height: 90%;
    width: 45%;
    border: 1px solid red;
    display:inline-flex;
}

.response-pane {
    float:right; /* add this */
    height: 90%;
    width: 45%;
    border: 1px solid black;
    display:inline-flex;
}

<div class="wrapper">
    <div class="request-pane"></div>
    <div class="response-pane"></div>
</div>

这很好。请从代码段中运行代码，希望这是您想要的结果。

Answer 4

如果您想要更简单的方法，请使用引导程序。将屏幕分成两半。在每个部分中创建div。这将完全满足您的要求。w3school是为此的最佳网站。

面对在HTML中将两个div对齐的问题

4 个答案: