为什么会这样？

Question

我已经开始对我的css知识进行了大量修订。我正在尝试执行以下操作：我想创建一个包含div的包装div，它包含一些文本和一些内容。我想在div中使用类item-2的每个div有一个宽度：50％并显示在另一个item-2旁边。以下是我的代码片段：

body{
  background:rgba(10,10,10,.8);
}
.wrapper{
  position:relative;
  width:100%;
  margin:auto;  
}
.item-2{
    text-align:center;
    display:inline-block;
    width:50%;
    border:2px solid blue;
 }
.demo{
  margin:auto;
  height:5em;
  width:5em;
  background:yellow;
}

<div class='wrapper'>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>

</div>

你可以看到它的div出现在它之前的div之下。但是我希望它们彼此相邻。我怎么能实现这个目标？我希望对您的解决方案进行解释，以提高我的知识

Answer 1

.wrapper display: flex;
.item-2 flex: 1;

Answer 2

Flex可以将它们保持在一行中。

.wrapper {
  display: flex;
 }

删除display: inline block项目。如果您想在小型设备中将它们添加到.wrapper

  flex-wrap: wrap;

我们需要min-width项目。 .items: min-width: 250px;。如果您的设备有足够的空间（500px），它们将保留在一行中，否则第二项将转到下一行。

Answer 3

试试这段代码......

＆＃13;

body{
  background:rgba(10,10,10,.8);
}
.wrapper{
  position:relative;
  width:100%;
  margin:auto;  
}
.item-2{
    float:left;
    text-align:center;
    box-sizing: border-box;
    display:inline-block;
    width:50%;
    border:2px solid blue;
 }
.demo{
  margin:auto;
  height:5em;
  width:5em;
  background:yellow;
}

＆＃13;

<div class='wrapper'>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>

</div>

＆＃13;

Answer 4

除了float和flex之外，还有：

display:table;

body{
  background:rgba(10,10,10,.8);
}
.wrapper{
  position:relative;
  width:100%;
  margin:auto; 
  display:table;
  table-layout:fixed;/* to even cells and keep within width set */
}
.item-2{
    text-align:center;
    display:table-cell;
    border:2px solid blue;
 }
.demo{
  margin:auto;
  height:5em;
  width:5em;
  background:yellow;
}

<div class='wrapper'>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>

</div>

display:grid;

body{
  background:rgba(10,10,10,.8);
}
.wrapper{
  position:relative;
  width:100%;
  margin:auto; 
  display:grid;
  grid-template-columns:50% 50%;
}
.item-2{
    text-align:center;
    border:2px solid blue;
 }
.demo{
  margin:auto;
  height:5em;
  width:5em;
  background:yellow;
}

<div class='wrapper'>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>

</div>

Answer 5

为什么会这样？

以这种方式使用inline-block是完全有效的并且可以使用但是你有两个问题导致元素占据不同的行：

inline-block项符合元素之间的空白区域，因此两个.item-2 div之间有一个额外的空格
width的{{1}}不是.item-2，50% + 50%左边框+ 2px右边框

如何修复

有多种方法可以解决空白问题，包括设置2px，但font-size: 0;和height width使用.demo你可能最好从HTML中的元素之间删除空格
为确保em实际上有.item-2 width，您可以添加50%，这会使box-sizing: border-box;和width包含{ {1}}和height

＆＃13;

padding

＆＃13;

border

＆＃13;

使div显示在其他旁边

5 个答案:

为什么会这样？

如何修复