嵌套 <div>，具有百分比宽度和行内块显示，溢出屏幕

Question

类似的问题问了好几次，但我的问题比较笼统！

第一个:

对于第一个问题，我在这里找到了准确的答案： Display Inline-Block with Widths as Percent

假设我们在 html 文件中有一个 <div> 元素并向其添加一些样式；

注意 宽度为 100%，它应该覆盖整个屏幕宽度，不应该超出屏幕范围

(在此代码段中，元素的边框在右侧超出屏幕！):

body{
margin:0;
}
#section1{
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: xx-large;
  border: red 5px solid;
}

<div id="section1">
  hello
</div>

但是，根据我找到的答案，

如果我将 box-sizing: border-box; 添加到 css 文件，<div> 元素的视图将会正常！这没关系。

(运行这个片段看结果):

#section1{
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: xx-large;
  border: red 5px solid;
}

<div id="section1">
  hello
</div>

到目前为止我没有任何问题，这只是理解我的第二个问题的介绍：

第二个

the aforesaid words doesn't work if we have nested <div> elements!

我搜索了很多，但对我的示例无效！

这个部分回答了这个问题，但效果不大！

这就是我想要的结果: here

此片段是我的示例，两条 "hello" 线不会沿着彼此发生！:

body{
  margin: 0;
}
.section2{
  box-sizing: border-box;
  display:inline-block;
  width:50%;
  border: green 2px solid;
}

<div id="section2">
  <div id="section2-1" class="section2"> hello</div>
  <div id="section2-2" class="section2">hello</div>
</div>

what is the easiest way without changing the display property or adding negative margins?!

Answer 1

body{
  margin: 0;
}
.section2{
  box-sizing: border-box;
  display:inline-block;
  width:50%;
  border: green 2px solid;
}

<div id="section2">
  <div id="section2-1" class="section2"> hello</div
  ><div id="section2-2" class="section2">hello</div>
</div>

它正在运行，但我做了什么？我简单地测试了 40%，看到你的两个 div 之间有一个 space，所以只删除了 space（实际上是一个带有一些表格的新行）

Answer 2

问题出在元素旁边的白色space，这是你使用display: inline-block;

时自动产生的

一个技巧是去除白色 spaces，正如您也看到的 .

如果您不想更改显示属性并且不删除代码缩进（白色 spaces）：

the easiest way is to add this properties:

box-sizing: border-box;
float: left;

more 关于 box-sizing 属性

more 关于 float 属性

body{
  margin: 0;
}
*{
  box-sizing: border-box;
}
#section1{
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: xx-large;
  border: red 5px solid;
}

#section2{
  display: inline-block;
  width: 100%;
  font-size: xx-large;
  border: blue 3px solid;
}
.section2{
  display:inline-block;
  width:50%;
  border: yellow 5px solid;
  float: left;
}

<div id="section1">
  hello
</div>
<br>
<br>
<br>
<div id="section2">
  <div id="section2-1" class="section2"> hello</div>
  <div id="section2-2" class="section2">hello</div>
</div>

Answer 3

行内块元素是white-space dependent，您可以参考这个答案来了解更多关于display as block, inline and inline-block之间的区别。有很多方法可以删除这个 white-spacing，其中一种方法是将 font-size 0 添加到 parent div，这里是 #section2 然后您可以手动分配 font-size 到他们的子元素。

body{
  margin: 0;
}
#section2{
  font-size:0;
}
.section2{
  font-size:18px;
  box-sizing: border-box;
  display:inline-block;
  width:50%;
  background: green;
}

<div id="section2">
  <div id="section2-1" class="section2"> hello</div>
  <div id="section2-2" class="section2">hello</div>
</div>

嵌套 <div>，具有百分比宽度和行内块显示，溢出屏幕

nested <div> with percentage width and inline-block display, overflows the screen

html

css

width

第一个:

第二个