Question

我正在尝试放置两个宽度为50％的div，但不知何故它不会出现在同一行上，但如果我执行49％它会堆叠在同一行中。任何人都可以告诉我我的错误代码（更有兴趣知道原因而不是解决方案）。

CSS -

* {
  padding: 0;
  margin: 0;
}
.wrapper {
  width: 100%;
}

.left-c {
  width: 50%;
  background: #3EF00C;
  display: inline-block;
}

.right-c {
  width: 50%;
  background: #2E4E6E;
  display: inline-block;
}

HTML -

<div class="wrapper">
    <div class="left-c">
        <p>LEFT ----- This is going to be some random text placed in a a left container inside the wrapper. I hope this text will suffice the requirement.</p>
    </div>
    <div class="right-c">
        <p>This is going to be some random text placed in a a right container inside the wrapper. I hope this text will suffice the requirement. ----- RIGHT</p>
    </div>
</div>

JS小提琴 - https://jsfiddle.net/no0chhty/1/

Answer 1

这是inline-block类型元素的经典问题。不幸的是，他们考虑了文档空白，包括空白字符。有多种解决方案，但我倾向于使用的方法包括将其父元素设置为font-size: 0，然后将内联块的字体大小重置为所需的值。

在此处详细了解：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

添加浮动：左;到班级＆＃34;左-c＆＃34;

.left-c {
          width: 50%;
          background: #3EF00C;
          display: inline-block;
      float:left;
        }

请查看FIDDLE

Answer 3

更改display: inline-block 到display: table-cell 这两个部分都是这样的：

.left-c {
  width: 50%;
  background: #3EF00C;
  display: table-cell;
}

.right-c {
  width: 50%;
  /* 49% works well */
  background: #2E4E6E;
  display: table-cell;
}

Here is the JSFiddle demo

Answer 4

替换此css

* {
  padding: 0;
  margin: 0;
}
   .wrapper {
    width: 100%;
    display:flex
  }

  .left-c {
    width: 50%;
    background: #3EF00C;
  }

  .right-c {
    width: 50%;
    background: #2E4E6E;
  }

Answer 5

您可以像这样浮动或弯曲，而不是内联块：链接到这里https://jsfiddle.net/JentiDabhi/r9s3z07e/

CSS

.left-c {
  background: #3ef00c none repeat scroll 0 0;
  float: left;
  width: 50%;
}

Answer 6

<div class="wrapper">
    <div class="left-c"><p></p></div><!----><div class="right-c"><p></p></div>
</div>

在左侧c的结束标记和右侧c的开始标记之间添加注释将解决问题。

Example

内联两个div并排 - CSS

6 个答案: