Question

我有两个div，一个div的宽度为20％，另一个为80％，它们应该排成一行，因为它们都占100％，但由于某种原因它们没有。

我确保我添加了盒子模型修复程序，我的意思是盒子大小，但是仍然不合适。我尝试过边距，边框，填充物，但到目前为止还没有运气。我不知道是什么问题。我通过查看每个div的百分比来测量它们构成的像素，由于某种原因它们构成了100％以上的像素，但是为什么呢？我将它们的宽度设置为20％和80％，为什么它们会比其父容器的总宽度大？

html {
  box-sizing: border-box;
}

*,
*:after,
*:before {
  box-sizing: border-box;
  /* The Box Model Fix */
}

#main-container {
  width: 100%;
  margin: 0;
  padding: 20px;
}

#title {
  width: 100%;
  height: 400px;
  border-radius: 5px;
  background-color: #193e7a;
  overflow: hidden;
  min-width: 900px;
}

#title h1 {
  /* font-family: 'Indie Flower', cursive; */
  font-family: 'Dancing Script', cursive;
  margin: 180px 0 0 20%;
  font-size: 100px;
  display: inline-block;
}

#title h2 {
  font-family: 'Indie Flower', cursive;
  /* font-family: 'Dancing Script', cursive; */
  margin: 0 0 0 20%;
  font-size: 30px;
  white-space: nowrap;
}

.col-small {
  border-radius: 5px;
  width: 20%;
  height: 300px;
  background-color: #a3b4d1;
  border-top: 5px solid red;
  overflow-y: hidden;
  overflow-x: hidden;
  min-width: 280px;
  display: inline-block;
  margin-top: 20px
}

.col-small p {
  padding: 10px 15px 15px 15px;
  margin: 0;
  display: inline-block;
}

.col-wide {
  border-radius: 5px;
  width: 80%;
  height: 300px;
  background-color: #a3b4d1;
  border-top: 5px solid green;
  overflow: hidden;
  min-width: 480px;
  display: inline-block;
  margin-top: 20px;
}

<div id="main-container">
  <header>
    <div id="title">
      <h1>Welcome!</h1>
      <h2>Hello World!</h2>
    </div>
  </header>
  <section>
    <div class="col-small">
      <img src="https://source.unsplash.com/random">
    </div>
    <div class="col-wide">
      <img src="https://source.unsplash.com/random">
    </div>
  </section>
</div>

https://jsfiddle.net/r9vgxeyu/1/

100％的Div百分比不能排成一行

0 个答案: