Question

类似的问题被多次询问，但我的问题更为笼统！

第一：

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

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

请注意宽度是100％，它应该放在整个屏幕宽度上，不应该走出屏幕

（在此代码段中元素的边框越过右侧的屏幕！）：

＆＃13;

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

＆＃13;

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

＆＃13;

但是，通过我找到的答案，

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

（运行此代码段以查看结果）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

SECOND

如果我们有嵌套的<div>元素，上述单词就不起作用了！

我经常搜索，但这对我的例子来说并不有效！

并且link部分回答了这个问题，但没有多大效果！

这是我想要的结果：here

这个片段是我的样本，这两个＆＃34;你好＆＃34;线条不会相互发生！：

＆＃13;

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

＆＃13;

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

＆＃13;

在不更改显示属性或添加负边距的情况下，最简单的方法是什么？！

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

问题来自元素旁边的空白区域，当您使用display: inline-block;时会自动生成

一个技巧是删除空格，因为你也看到了here。

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

最简单方式是添加此属性：

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

more关于box-sizing属性

more关于float属性

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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>具有百分比宽度和内联块显示，溢出屏幕

第一：

SECOND

3 个答案: